{\rtf1\ansi\ansicpg936\cocoartf2509
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fnil\fcharset134 PingFangSC-Regular;\f2\fnil\fcharset0 LucidaGrande;
\f3\fnil\fcharset0 Monaco;}
{\colortbl;\red255\green255\blue255;\red255\green0\blue0;\red0\green0\blue0;\red33\green93\blue168;
\red246\green246\blue246;\red56\green174\blue112;\red65\green65\blue65;}
{\*\expandedcolortbl;;\csgenericrgb\c100000\c0\c0;\csgenericrgb\c0\c0\c0;\cssrgb\c16078\c45098\c71765;
\cssrgb\c97255\c97255\c97255;\cssrgb\c25882\c72549\c51373;\cssrgb\c32157\c32157\c32157;}
\paperw11900\paperh16840\margl1440\margr1440\vieww13940\viewh9580\viewkind0
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f0\fs24 \cf2  
\f1 \'c3\'e6\'ca\'d4\'b9\'d9\'ba\'c3\'a3\'ac\'ce\'d2\'bd\'d0\'d4\'f8\'d5\'f9\'a3\'ac\'b1\'cf\'d2\'b5\'d3\'da\'c4\'cf\'be\'a9\'b4\'f3\'d1\'a7\'bd\'f0\'c1\'ea\'d1\'a7\'d4\'ba\'a1\'a3\'ce\'d2\'d5\'c6\'ce\'d5\'b5\'c4\'c7\'b0\'b6\'cb\'bc\'bc\'c4\'dc\'d3\'d0htm,css\'a3\'acjs,\'d2\'d4\'bc\'b0es6\'a1\'a3\'d2\'b2\'d3\'d0react.vue\'bf\'f2\'bc\'dc\'b5\'c4\'bf\'aa\'b7\'a2\'be\'ad\'d1\'e9\'a1\'a3\
\'ce\'d2\'d6\'ae\'c7\'b0\'d7\'f6\'b9\'fd\'b5\'c4\'cf\'ee\'c4\'bf\'d3\'d0\'be\'c6\'bb\'a8\'b6\'f9\'d3\'c5\'c6\'b7\'c9\'cc\'b3\'c7\'a3\'ac\'ba\'cd\'c3\'ce\'cf\'eb\'c4\'f0\'d4\'ec\'d0\'a1\'b3\'cc\'d0\'f2\'a3\'ac\'ba\'f3\'cc\'a8\'b9\'dc\'c0\'ed\'cf\'b5\'cd\'b3\'a1\'a3\

\f0 \
\

\fs32 VUE:
\fs24 \cf0 \
\cf2 day1:\
	
\f1 \cf3 \'b9\'d9\'cd\'f8\'a3\'ba
\f0 https://cn.vuejs.org\
	API
\f1 \'a3\'ba
\f0 https://cn.vuejs.org/v2/api/\
\
	
\f1 \'d0\'a1
\f0  -> 
\f1 \'b4\'f3
\f0 \
	
\f1 \'b7\'e2\'d7\'b0
\f0 (
\f1 \'ba\'af\'ca\'fd
\f0 )->
\f1 \'b6\'e0\'b8\'f6\'b7\'e2\'d7\'b0
\f0 (
\f1 \'ce\'c4\'bc\'fe
\f0 )==
\f1 \'bf\'e2
\f0 ||
\f1 \'bf\'f2\'bc\'dc
\f0 \
					
\f2 \uc0\u8595 
\f0 \
				   
\f1 \'b2\'e5\'bc\'fe
\f0 \
\
				   
\f1 \'c4\'a3\'bf\'e9
\f0 (
\f1 \'ce\'c4\'bc\'fe
\f0 )  
\f1 \'b7\'d6\'c0\'e0\'a3\'a8\'c4\'bf\'c2\'bc
\f0 )->
\f1 \'b0\'fc
\f0 \
	
\f1 \'bf\'f2\'bc\'dc\'a3\'ba\'b8\'c4\'b1\'e4\'c1\'cb\'b1\'e0\'c2\'eb\'cb\'bc\'cf\'eb
\f0    VUE: 
\f1 \'ca\'fd\'be\'dd\'c7\'fd\'b6\'af\'a3\'ac\'d2\'bb\'c7\'d0\'b6\'bc\'ca\'c7\'ca\'fd\'be\'dd
\f0 ,
\f1 \'c3\'e6\'cf\'f2\'ca\'fd\'be\'dd
\f0 \
		
\f1 \'c3\'e6\'cf\'f2
\f0   
\f1 \'ca\'c2\'bc\'fe
\f0 \
		
\f1 \'c3\'e6\'cf\'f2
\f0   
\f1 \'b6\'d4\'cf\'f3
\f0 \
		
\f1 \'c3\'e6\'cf\'f2
\f0   
\f1 \'ca\'fd\'be\'dd
\f0 \
	
\f1 \'bf\'e2
\f0 :  
\f1 \'b9\'a4\'be\'df\'b1\'be\'c9\'ed\'b2\'bb\'b8\'c4\'b1\'e4\'b1\'e0\'c2\'eb\'b5\'c4\'b7\'bd\'ca\'bd
\f0 \
		jquery -> dom		
\f1 \'ca\'c2\'bc\'fe\'c7\'fd\'b6\'af
\f0 \
\
MVC
\f1 \'a3\'ba
\f0 html
\f1 \'d2\'b3\'c3\'e6\'c0\'ef\'c3\'e6\'bb\'e1\'b3\'f6\'cf\'d6
\f0 <%=
\f1 \'ba\'f3\'cc\'a8\'ca\'f4\'d0\'d4
\f0 %>  \{$
\f1 \'ba\'f3\'cc\'a8\'ca\'f4\'d0\'d4
\f0 $\} \{\{
\f1 \'ba\'f3\'cc\'a8\'ca\'f4\'d0\'d4
\f0 \}\} mustache\
	
\f1 \'d2\'bb\'b8\'f6\'cb\'bc\'cf\'eb\'a1\'a2\'ca\'c7\'ba\'f3\'b6\'cb\'b2\'fa\'ce\'ef
\f0 ,
\f1 \'ca\'c7\'ce\'aa\'c1\'cb\'c7\'b0\'ba\'f3\'b6\'cb\'b7\'d6\'c0\'eb
\f0 \
	1. 
\f1 \'ba\'f3\'cc\'a8
\f0  java(jsp+html)  php(php+html+js)  nodejs(nodejs+ejs)\
	2. 
\f1 \'c7\'b0\'cc\'a8
\f0  (html+css+js)\
	3. 
\f1 \'b1\'e0\'bc\'ad
\f0  (
\f1 \'c4\'c3\'d7\'c5\'ba\'f3\'cc\'a8\'b8\'f8\'cb\'fb\'bf\'aa\'b7\'a2\'b5\'c4\'ba\'f3\'cc\'a8\'b9\'dc\'c0\'ed\'d2\'b3\'c3\'e6
\f0 xxx.com:8008/admin.php)\
	4. 
\f1 \'c9\'e8\'bc\'c6
\f0 \
\

\f1 \'c7\'b0\'b6\'cb
\f0 MVC(
\f1 \'b7\'d6\'c0\'eb
\f0 js)
\f1 \'a3\'ba
\f0    
\f1 \'ca\'fd\'be\'dd\'a1\'a2\'b1\'ed\'cf\'d6\'a1\'a2\'d2\'b5\'ce\'f1\'b7\'d6\'c0\'eb
\f0 \
	model		M  
\f1 \'ca\'fd\'be\'dd
\f0   ajax/jsonp/
\f1 \'ca\'fd\'be\'dd\'bd\'e2\'ce\'f6
\f0   
\f1 \'bf\'c9\'d2\'d4\'b8\'b4\'d3\'c3
\f0 \
		| xx1.js\
		...\
	view	    V  
\f1 \'ca\'d3\'cd\'bc\'b1\'ed\'cf\'d6\'b2\'e3
\f0  
\f1 \'d5\'b9\'ca\'be\'ca\'fd\'be\'dd\'a1\'a2\'b4\'b4\'bd\'a8\'d4\'aa\'cb\'d8\'a3\'ac\'b1\'e4\'c9\'ab\'a3\'ac\'d4\'cb\'b6\'af
\f0  
\f1 \'bf\'c9\'d2\'d4\'b8\'b4\'d3\'c3
\f0 \
		...\
	control		C  
\f1 \'bf\'d8\'d6\'c6\'b2\'e3
\f0 (
\f1 \'b4\'ae\'d2\'b5\'ce\'f1
\f0 ,
\f1 \'ca\'c2\'bc\'fe\'c7\'fd\'b6\'af
\f0 )  
\f1 \'d2\'bb\'b0\'e3\'b2\'bb\'b8\'b4\'d3\'c3
\f0 \
		...\
\
	function readBaidu(str,callback)\{..
\f1 \'c4\'c3\'d7\'c5\'d0\'e8\'c7\'f3
\f0 str,
\f1 \'c7\'f3\'ca\'fd\'be\'dd\'a3\'ac\'b5\'f7\'d3\'c3\'bb\'d8\'b5\'f7\'b4\'f8\'ca\'fd\'be\'dd\'b3\'f6\'c8\'a5
\f0 .\}\
	function writeLi(data,obj)\{...
\f1 \'c4\'c3\'d7\'c5\'ca\'fd\'be\'dd\'d0\'b4\'d2\'b3\'c3\'e6
\f0 \}\
	window.onload=function()\{\
		
\f1 \'d7\'a5\'c8\'a1\'b6\'d4\'cf\'f3
\f0 \
		oBtn.onclick=function()\{\
			readBaidu('xxx',function(res)\{\
				writeLi(res);\
				winObj.close()\
			\})\
		\}\
	\}\
\
VUE: 
\f1 \'ca\'c7\'b8\'f6
\f0 M V VM
\f1 \'bf\'f2\'bc\'dc
\f0 \
	MVC:
\f1 \'d1\'dc\'c9\'fa\'b3\'f6\'ba\'dc\'b6\'e0\'b1\'e4\'cc\'e5
\f0   MVP MVVM MV*\
	mv  vm~C\
	MVVM M  <-> VM <-> V\

\f1 \'bb\'f9\'b1\'be\'ca\'b9\'d3\'c3\'a3\'ba
\f0 \
	new
\f1 \'b3\'f6\'c0\'b4\'d2\'bb\'b8\'f6
\f0 Vue
\f1 \'b5\'c4\'ca\'b5\'c0\'fd\'a3\'ac\'b4\'ab\'d2\'bb\'b6\'d1\'c5\'e4\'d6\'c3\'b2\'ce\'ca\'fd\'a3\'ac\'bf\'d8\'d6\'c6\'d2\'bb\'c6\'ac
\f0 html\
\
VM:		
\f1 \'cf\'ec\'d3\'a6\'cf\'b5\'cd\'b3
\f0  - > vDOM
\f1 \'d7\'f6\'b1\'ea\'bc\'c7
\f0  ->
\f1 \'d2\'bb\'b8\'f6\'d1\'ad\'bb\'b7\'d6\'dc\'c6\'da\'bd\'e1\'ca\'f8\'ba\'f3
\f0 ->
\f1 \'b2\'d9\'d7\'f7
\f0 DOM\
		new Vue   
\f1 \'b7\'b5\'bb\'d8
\f0   VM\
		new Vue(\{\
			el:'
\f1 \'d1\'a1\'d4\'f1\'c6\'f7
\f0 '  
\f1 \'d2\'aa\'bf\'d8\'d6\'c6\'c6\'f7\'b5\'c4\'c4\'c7\'c6\'ac
\f0 html
\f1 \'b4\'fa\'c2\'eb
\f0 \
			data:\{key:value\}
\f1 \'ca\'fd\'be\'dd
\f0 \
			methods:\{fnName:fn\} 
\f1 \'b7\'bd\'b7\'a8
\f0 \
		\})\
	M:	
\f1 \'b3\'f5\'ca\'bc\'bb\'af\'ca\'fd\'be\'dd
\f0 (
\f1 \'cb\'f9\'d3\'d0\'b5\'c4\'ca\'fd\'be\'dd\'a3\'ac\'cd\'c6\'bc\'f6\'d2\'bb\'bf\'aa\'ca\'bc\'d2\'aa\'b3\'f5\'ca\'bc\'bb\'af
\f0 )\
		data 
\f1 \'d1\'a1\'cf\'ee
\f0    number/string/boolean/array/json/undefined/null\
	V:  
\f1 \'ca\'fd\'be\'dd\'b0\'f3\'b6\'a8
\f0 \
		\{\{
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 \}\}	
\f1 \'c4\'a3\'b0\'e5
\f0  mustche  
\f1 \'b2\'e5\'d6\'b5\'b1\'ed\'b4\'ef\'ca\'bd
\f0    \
		v-text="
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 "		vue
\f1 \'cc\'d8\'d3\'d0\'b5\'c4\'ca\'f4\'d0\'d4
\f0 (
\f1 \'d6\'b8\'c1\'ee
\f0 )\
		v-html="strong"		
\f1 \'b7\'c7\'d7\'aa\'d2\'e5\'ca\'e4\'b3\'f6
\f0 \
		v-for="(val,index) in 
\f1 \'ca\'fd\'be\'dd
\f0 "		val
\f1 \'d6\'b5
\f0   index
\f1 \'cb\'f7\'d2\'fd
\f0 	
\f1 \'b1\'e4\'c1\'bf\'ca\'fd\'d7\'e9\'a1\'a2\'b6\'d4\'cf\'f3
\f0 \
			key="bmw"  
\f1 \'d6\'b8\'b6\'a8
\f0 key 
\f1 \'ca\'c7\'b8\'f6
\f0 bmw
\f1 \'d7\'d6\'b7\'fb
\f0  vue
\f1 \'ca\'c7\'c8\'cf\'b5\'c3
\f0  
\f1 \'d0\'de\'b8\'c4
\f0 VDom
\f1 \'b5\'c4
\f0 key
\f1 \'d6\'b5
\f0  , 
\f1 \'c4\'ac\'c8\'cf\'d6\'b8\'cf\'f2\'ca\'fd\'d7\'e9\'cb\'f7\'d2\'fd
\f0 \
			:key="item.id"  
\f1 \'d6\'b8\'b6\'a8
\f0 key 
\f1 \'ca\'c7\'ca\'fd\'be\'dd
\f0 id
\f1 \'a3\'a8\'ce\'a8\'d2\'bb\'d0\'d4\'a3\'a9
\f0  
\f1 \'d0\'de\'b8\'c4
\f0 VDom
\f1 \'b5\'c4
\f0 key
\f1 \'d6\'b5
\f0 \
		v-bind:html
\f1 \'ca\'f4\'d0\'d4
\f0 ="
\f1 \'ca\'fd\'be\'dd
\f0 "	
\f1 \'c6\'d5\'cd\'a8\'b5\'c4
\f0 html
\f1 \'ca\'f4\'d0\'d4\'b0\'f3\'b6\'a8\'ca\'fd\'be\'dd
\f0 \
			:html
\f1 \'ca\'f4\'d0\'d4
\f0 ="
\f1 \'ca\'fd\'be\'dd
\f0 "  
\f1 \'bc\'f2\'d0\'b4
\f0    title/src/url/.....\

\f1 \'ca\'c2\'bc\'fe\'a3\'ba
\f0 \
			v-on:
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8
\f0 "  
\f1 \'b2\'bb\'b4\'f8
\f0 on ->  click\
			   @:
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8
\f0 "	
\f1 \'bc\'f2\'d0\'b4
\f0 \
			   @:
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8
\f0 (
\f1 \'b2\'ce\'ca\'fd
\f0 )"\
			   @:
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8
\f0 ($event,
\f1 \'b2\'ce\'ca\'fd
\f0 )"		\
		
\f1 \'d1\'a1\'cf\'ee
\f0 	   \
			methods:\{
\f1 \'b7\'bd\'b7\'a8
\f0 :function(ev,
\f1 \'b2\'ce\'ca\'fd
\f0 )\{ev/event\}\}\
------------------------------------------------------------------------------\

\f1 \'c0\'e0\'ca\'f4\'d0\'d4
\f0 |
\f1 \'b7\'bd\'b7\'a8
\f0   
\f1 \'ba\'cd
\f0  
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 |
\f1 \'b7\'bd\'b7\'a8
\f0 \
	Vue == 
\f1 \'c0\'e0
\f0 \
	vm ==  new Vue(\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}) 
\f1 \'b7\'b5\'bb\'d8
\f0   
\f1 \'ca\'b5\'c0\'fd
\f0 \
	
\f1 \'d4\'da\'c5\'e4\'d6\'c3\'c4\'da\'b2\'bf
\f0   
\f1 \'b5\'c4
\f0   this == vm 
\f1 \'ca\'b5\'c0\'fd
\f0 \
		Vue.
\f1 \'c0\'e0\'b7\'bd\'b7\'a8
\f0 |
\f1 \'c0\'e0\'ca\'f4\'d0\'d4
\f0 \
		vm.$
\f1 \'ca\'b5\'c0\'fd\'b7\'bd\'b7\'a8
\f0 ()|$
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0   == this.$
\f1 \'ca\'b5\'c0\'fd\'b7\'bd\'b7\'a8
\f0 ()|$
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 \
		vm==this\

\f1 \'ca\'fd\'be\'dd\'bc\'ec\'b2\'e2\'a3\'ba
\f0 vue
\f1 \'b5\'c4\'ca\'fd\'be\'dd\'ca\'c7\'cf\'ec\'d3\'a6\'ca\'bd\'a3\'ac\'b7\'c7\'cf\'ec\'d3\'a6\'ca\'bd\'b5\'c4\'c7\'e9\'bf\'f6\'c8\'e7\'cf\'c2
\f0 \
	
\f1 \'ca\'fd\'d7\'e9\'ca\'fd\'be\'dd\'b1\'e4\'bb\'af\'a3\'ba
\f0   \
			
\f1 \'ce\'ca\'cc\'e2
\f0 :	
\f1 \'b6\'d4\'ca\'fd\'d7\'e9\'ca\'b9\'d3\'c3\'c1\'cb\'b7\'c7\'b1\'e4\'d2\'ec
\f0  (non-mutating method) 
\f1 \'b7\'bd\'b7\'a8\'a3\'a8\'b7\'b5\'bb\'d8\'b5\'c4\'c1\'cb\'d0\'c2\'ca\'fd\'d7\'e9\'a3\'a9
\f0 \
			
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0  
\f1 \'b6\'d4\'cf\'f3\'ba\'cf\'b2\'a2
\f0 \
\
			
\f1 \'ce\'ca\'cc\'e2\'a3\'ba\'c0\'fb\'d3\'c3\'cb\'f7\'d2\'fd\'d6\'b1\'bd\'d3\'c9\'e8\'d6\'c3\'d2\'bb\'b8\'f6\'cf\'ee
\f0 |
\f1 \'d0\'de\'b8\'c4\'ca\'fd\'d7\'e9\'b5\'c4\'b3\'a4\'b6\'c8\'ca\'b1
\f0 \
			
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 Vue.set(
\f1 \'ca\'fd\'d7\'e9\'b6\'d4\'cf\'f3
\f0 , key, value) | vm|this.$set(
\f1 \'ca\'fd\'d7\'e9\'b6\'d4\'cf\'f3
\f0 , key, value)\
	
\f1 \'b6\'d4\'cf\'f3\'b5\'c4\'ca\'fd\'be\'dd\'b1\'e4\'bb\'af\'a3\'ba
\f0 \
			
\f1 \'ce\'ca\'cc\'e2\'a3\'ba
\f0 data:\{a:1\}\
					a 
\f1 \'ca\'fd\'be\'dd\'ca\'c7\'cf\'ec\'d3\'a6\'ca\'bd\'b5\'c4
\f0 \
					vm.b='qq';  b 
\f1 \'ca\'f4\'d0\'d4\'b2\'bb\'ca\'c7\'cf\'ec\'d3\'a6\'ca\'bd\'b5\'c4
\f0 \
			
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 Vue.set(
\f1 \'ca\'fd\'d7\'e9\'b6\'d4\'cf\'f3
\f0 , key, value) | vm|this.$set(
\f1 \'ca\'fd\'d7\'e9\'b6\'d4\'cf\'f3
\f0 , key, value)\
------------------------------------------------------------------------------\

\f1 \'c4\'a3\'bf\'e9\'b1\'ed\'b4\'ef\'ca\'bd
\f0 :\
	\{\{
\f1 \'ca\'fd\'be\'dd\'b1\'be\'c9\'ed
\f0 |data
\f1 \'b5\'c4\'ca\'f4\'d0\'d4
\f0 |
\f1 \'b1\'e4\'c1\'bf
\f0 |
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0 \}\}\
	v-
\f1 \'d6\'b8\'c1\'ee\'c3\'fb
\f0 ="
\f1 \'ca\'fd\'be\'dd
\f0 |data
\f1 \'b5\'c4\'ca\'f4\'d0\'d4
\f0 |
\f1 \'b1\'e4\'c1\'bf
\f0 |
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0 "\

\f1 \'bc\'c6\'cb\'e3\'ca\'f4\'d0\'d4
\f0 :  
\f1 \'ca\'c7\'d2\'bb\'b8\'f6\'ba\'af\'ca\'fd
\f0 ,
\f1 \'cb\'f9\'d2\'c0\'c0\'b5\'b5\'c4\'d4\'aa\'ca\'fd\'be\'dd\'b1\'e4\'bb\'af\'ca\'b1\'a3\'ac\'be\'cd\'bb\'e1\'d4\'d9\'b4\'ce\'d6\'b4\'d0\'d0
\f0 \
	computed:\{\
		
\f1 \'bc\'c6\'cb\'e3\'ca\'f4\'d0\'d4
\f0 :
\f1 \'ba\'af\'ca\'fd
\f0 :function()\{return 
\f1 \'b7\'b5\'bb\'d8\'d6\'b5
\f0 \}		
\f1 \'ca\'b9\'d3\'c3
\f0 :	\{\{
\f1 \'bc\'c6\'cb\'e3\'ca\'f4\'d0\'d4
\f0 \}\}\
	\}\
\
	
\f1 \'d3\'eb
\f0 method
\f1 \'b5\'c4\'c7\'f8\'b1\'f0
\f0 :	
\f1 \'b7\'bd\'b7\'a8\'bb\'e1\'c3\'bf\'b4\'ce\'b5\'f7\'d3\'c3\'a3\'ac\'bc\'c6\'cb\'e3\'ca\'f4\'d0\'d4\'b2\'bb\'bb\'e1
\f0 (
\f1 \'d6\'bb\'d3\'d0\'d4\'da\'d3\'eb\'d6\'ae\'cf\'e0\'b9\'d8\'b5\'c4\'d4\'aa\'ca\'fd\'be\'dd\'b7\'a2\'c9\'fa\'b1\'e4\'bb\'af\'ca\'b1\'a3\'ac\'b2\'c5\'b5\'f7\'d3\'c3
\f0 )\
		
\f1 \'bc\'c6\'cb\'e3\'ca\'f4\'d0\'d4\'b5\'c4\'d0\'d4\'c4\'dc\'b8\'df
\f0 : 
\f1 \'ca\'ca\'ba\'cf\'d7\'f6\'c9\'b8\'d1\'a1
\f0 \
		
\f1 \'b7\'bd\'b7\'a8\'a3\'ba\'ca\'ca\'ba\'cf\'d4\'da\'c1\'d0\'b1\'ed\'e4\'d6\'c8\'be\'ca\'b9\'d3\'c3\'a3\'ac\'c7\'bf\'d6\'c6\'e4\'d6\'c8\'be\'d6\'b4\'d0\'d0
\f0 \
------------------------------------------------------------------------------\

\f1 \'cb\'ab\'cf\'f2\'b0\'f3\'b6\'a8\'a3\'ba
\f0 \
	v-model:	
\f1 \'b4\'b4\'bd\'a8\'cb\'ab\'cf\'f2\'ca\'fd\'be\'dd\'b0\'f3\'b6\'a8
\f0 (M<->V) , 
\f1 \'d3\'c3\'d4\'da\'c4\'dc\'c9\'fa\'b2\'fa\'ca\'fd\'be\'dd\'b5\'c4\'b1\'ed\'b5\'a5\'d4\'aa\'cb\'d8
\f0 \
		input/radio/select/.....  
\f1 \'b0\'f3\'b6\'a8\'b5\'c4\'ca\'c7\'b1\'ed\'b5\'a5\'d4\'aa\'cb\'d8\'b5\'c4
\f0   value
\f1 \'d6\'b5
\f0  \

\f1 \'b5\'a5\'cf\'f2\'b0\'f3\'b6\'a8\'a3\'ba
\f0 \
	:value="model
\f1 \'b2\'e3\'ca\'f4\'d0\'d4
\f0 "\
	:checked="......"		\
\

\f1 \'b5\'a5\'cf\'f2\'b0\'f3\'b6\'a8\'c4\'a3\'c4\'e2\'cb\'ab\'cf\'f2\'b0\'f3\'b6\'a8
\f0 :\
	:value="...."   model->view\
	v-on:input="fn($event.value)"  
\f1 \'ca\'e4\'c8\'eb\'ca\'b1\'b0\'d1\'ca\'c2\'bc\'fe\'b6\'d4\'cf\'f3\'b5\'c4
\f0 value
\f1 \'d0\'af\'b4\'f8\'b5\'bd\'b7\'bd\'b7\'a8\'a3\'ac\'b7\'bd\'b7\'a8\'d0\'de\'b8\'c4\'c1\'cb
\f0 model\
\
------------------------------------------------------------------------------\

\f1 \'d6\'b8\'c1\'ee\'a3\'ba
\f0 \
	v-text/v-model/v-bind/v-for/v-html/v-on/v-once/v-bulala\
\
				v-show="
\f1 \'b2\'bc\'b6\'fb
\f0 " 			v-if="
\f1 \'b2\'bc\'b6\'fb
\f0 "\
	
\f1 \'c7\'f8\'b1\'f0
\f0 :	
\f1 \'b2\'d9\'d7\'f7
\f0 css					
\f1 \'b2\'d9\'d7\'f7
\f0 dom\
	
\f1 \'b3\'a1\'be\'b0
\f0 :	
\f1 \'ca\'ca\'ba\'cf\'c6\'b5\'b7\'b1\'c7\'d0\'bb\'bb
\f0 		            
\f1 \'ca\'ca\'ba\'cf\'b2\'bb\'c6\'b5\'b7\'b1\'c7\'d0\'bb\'bb
\f0 \
	
\f1 \'d0\'d4\'c4\'dc
\f0 :	
\f1 \'b3\'f5\'ca\'bc\'e4\'d6\'c8\'be\'cf\'fb\'ba\'c4
\f0 			
\f1 \'c6\'b5\'b7\'b1\'c7\'d0\'bb\'bb\'bb\'d8\'d3\'d0\'cf\'fb\'ba\'c4
\f0 \
\
\

\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'d6\'b8\'c1\'ee
\f0 (directive):\
	v-text/v-html/v-bind/v-on/v-model/v-for/v-if/v-show/v-else/v-else-if/v-bulala\
\

\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'d6\'b8\'c1\'ee
\f0 : 
\f1 \'d6\'b8\'c1\'ee\'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd
\f0 |
\f1 \'b6\'d4\'cf\'f3
\f0 ,
\f1 \'d3\'c3\'c0\'b4\'b2\'d9\'d7\'f7
\f0 dom
\f1 \'b5\'c4
\f0 , 
\f1 \'c0\'ef\'c3\'e6\'b5\'c4
\f0 this 
\f1 \'b7\'b5\'bb\'d8
\f0 window\
	a)	Vue.directive('
\f1 \'d6\'b8\'c1\'ee\'c3\'fb\'b2\'bb\'b4\'f8
\f0 v-',
\f1 \'ba\'af\'ca\'fd
\f0 (el,binding))\
		el == 
\f1 \'ca\'b9\'d3\'c3\'d6\'b8\'c1\'ee\'b5\'c4
\f0 DOM
\f1 \'d4\'aa\'cb\'d8
\f0 \
		binding 
\f1 \'ca\'c7\'b8\'f6\'b6\'d4\'cf\'f3
\f0  
\f1 \'ba\'ac\'d3\'d0\'b4\'ab\'c8\'eb\'b5\'c4
\f0  
\f1 \'b2\'ce\'ca\'fd
\f0 (binding.value)\
	b)  
\f1 \'b6\'a8\'d2\'e5\'d4\'da\'d1\'a1\'cf\'ee\'c0\'ef\'c3\'e6
\f0 \
		directives:\{\
			
\f1 \'d6\'b8\'c1\'ee\'c3\'fb\'b2\'bb\'b4\'f8
\f0 v-	: 
\f1 \'ba\'af\'ca\'fd
\f0 (el,binding)\{\}\
		\}\
\
	
\f1 \'d6\'b8\'c1\'ee\'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd
\f0 (
\f1 \'bc\'f2\'d0\'b4
\f0 )
\f1 \'a3\'ac\'bf\'c9\'d2\'d4\'ca\'c7\'b8\'f6\'b6\'d4\'cf\'f3
\f0 \
\
	\{\
		
\f1 \'b9\'b3\'d7\'d3\'ba\'af\'ca\'fd
\f0 \
		inserted:fn(el,binding)		
\f1 \'b0\'f3\'b6\'a8\'d6\'b8\'c1\'ee\'b5\'c4\'d4\'aa\'cb\'d8\'b2\'e5\'c8\'eb\'b5\'bd\'b8\'b8\'bd\'da\'b5\'e3\'ca\'b1\'b5\'f7\'d3\'c3
\f0 \
		bind:fn	
\f1 \'d6\'b8\'c1\'ee\'b5\'da\'d2\'bb\'b4\'ce\'b0\'f3\'b6\'a8\'b5\'bd\'d4\'aa\'cb\'d8\'ca\'b1\'b5\'f7\'d3\'c3
\f0 \
		update:fn	
\f1 \'d6\'b8\'c1\'ee\'cb\'f9\'d4\'da\'b5\'c4\'d4\'aa\'cb\'d8\'b5\'c4
\f0 model
\f1 \'b2\'e3\'b5\'c4\'ca\'fd\'be\'dd\'a3\'ac
\f0 view
\f1 \'d3\'d0\'b8\'fc\'d0\'c2\'c7\'eb\'c7\'f3\'ca\'b1
\f0 \
		componentUpdated:fn	
\f1 \'b8\'fc\'d0\'c2\'cd\'ea\'b3\'c9\'ca\'b1
\f0 \
	\}\
\
	
\f1 \'bc\'f2\'d0\'b4\'b7\'bd\'ca\'bd
\f0 (
\f1 \'ba\'af\'ca\'fd
\f0 ): bind + update\
\
------------------------------------------------------------------------------\

\f1 \'d7\'f7\'d2\'b5\'a3\'ba
\f0 \
	
\f1 \'c1\'f4\'d1\'d4\'b0\'e5
\f0 :
\f1 \'d4\'f6\'c9\'be\'b8\'c4\'b2\'e9
\f0 \
	
\f1 \'d6\'b8\'c1\'ee
\f0 : 
\f1 \'cd\'cf\'d7\'a7
\f0 (
\f1 \'cf\'de\'b6\'a8
\f0 )+
\f1 \'d4\'ad\'c9\'fa
\f0 |jq\
		  
\f1 \'b6\'a8\'d2\'e5\'b5\'bd\'c8\'ab\'be\'d6
\f0 |
\f1 \'b6\'a8\'d2\'e5\'ca\'b5\'c0\'fd\'c4\'da\'b2\'bf
\f0 \
\
\
------------------------------------------------------------------------------\
vue-tools \
	
\f1 \'b5\'f7\'ca\'d4\'b9\'a4\'be\'df
\f0 \
	https://github.com/vuejs/vue-devtools 
\f1 \'cf\'c2\'d4\'d8\'b0\'b2\'d7\'b0\
\
\
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0
\cf2 day2:
\f0 \cf3 \
	  
\f1 \'ca\'c2\'bc\'fe\'a3\'ba
\f0 \
	
\f1 \'c4\'a3\'bf\'e9\'b0\'f3\'b6\'a8\'d0\'d0\'bc\'e4\'ca\'c2\'bc\'fe
\f0 :		<xx v-on:
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8\'c3\'fb
\f0 ($event,
\f1 \'b2\'ce\'ca\'fd
\f0 )"\
							<xx @
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 ="
\f1 \'b7\'bd\'b7\'a8\'c3\'fb
\f0 ($event,
\f1 \'b2\'ce\'ca\'fd
\f0 )"		\
	
\f1 \'b0\'f3\'b6\'a8\'d7\'d4\'b6\'a8\'ca\'c2\'bc\'fe
\f0 :\
		
\f1 \'b6\'a8\'d2\'e5\'a3\'ba
\f0 vm.$on( '
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 '|['
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 1','
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 2'], 
\f1 \'bb\'d8\'b5\'f7
\f0 (
\f1 \'b2\'ce\'ca\'fd
\f0 ) )\
		
\f1 \'cf\'fa\'bb\'d9\'a3\'ba
\f0 vm.$off( '
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 '|['
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 1','
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 2'], 
\f1 \'bb\'d8\'b5\'f7
\f0 (
\f1 \'b2\'ce\'ca\'fd
\f0 ) )\
		
\f1 \'b4\'a5\'b7\'a2
\f0 : vm.$emit(
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'c3\'fb
\f0 1,
\f1 \'b2\'ce\'ca\'fd
\f0 )\
	
\f1 \'ca\'c2\'bc\'fe\'b6\'d4\'cf\'f3
\f0 :\
		
\f1 \'ca\'c2\'bc\'fe\'b6\'d4\'cf\'f3\'bf\'c9\'d2\'d4\'b2\'bb\'b4\'ab\'b5\'dd\'a3\'ac\'d0\'e8\'d2\'aa\'b4\'ab\'b5\'dd\'b5\'c4\'b3\'a1\'be\'b0
\f0 :
\f1 \'b4\'ab\'b2\'ce\'ca\'fd\'cd\'ac\'ca\'b1\'ca\'b9\'d3\'c3\'ca\'c2\'bc\'fe\'b6\'d4\'cf\'f3\'ca\'b1
\f0 \
		show($event,
\f1 \'b2\'ce\'ca\'fd
\f0 )\
\
	
\f1 \'c3\'b0\'c5\'dd\'a3\'ba\'c4\'ac\'c8\'cf\'c3\'b0\'c5\'dd
\f0 \
		$event   ev|event.cacelBubble=true ev.stopPropagation()\
		@click.stop 
\f1 \'d0\'de\'ca\'ce\'b7\'fb
\f0 \
	
\f1 \'c4\'ac\'c8\'cf\'d0\'d0\'ce\'aa
\f0 :\
		event|ev.preventDefault();   @
\f1 \'ca\'c2\'bc\'fe
\f0 .prevent\
\
	
\f1 \'c1\'ac\'d7\'ba
\f0 :	@
\f1 \'ca\'c2\'bc\'fe
\f0 .
\f1 \'d0\'de\'ca\'ce\'b7\'fb
\f0 .
\f1 \'d0\'de\'ca\'ce\'b7\'fb
\f0 	@
\f1 \'ca\'c2\'bc\'fe
\f0 .prevent.stop\
\
	
\f1 \'d0\'de\'ca\'ce\'b7\'fb
\f0 :  keyCode/
\f1 \'bc\'fc\'c3\'fb
\f0 (enter/left/right/up/down/...)			\
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f1 \cf3 \'d0\'de\'ca\'ce\'b7\'fb\'a3\'ba
\f0 \
	
\f1 \'ca\'c2\'bc\'fe\'a3\'ac\'bc\'fc\'c5\'cc
\f0  
\f1 \'ba\'ac\'d3\'d0\'d0\'de\'ca\'ce\'b7\'fb
\f0 \
	
\f1 \'ca\'c2\'bc\'fe\'c3\'fb
\f0 .
\f1 \'d0\'de\'ca\'ce\'b7\'fb
\f0   
\f1 \'d7\'f7\'d3\'c3\'a3\'ba\'d0\'de\'ca\'ce\'ca\'c2\'bc\'fe\'cc\'f5\'bc\'fe
\f0 \
\

\f1 \'b9\'fd\'c2\'cb\'c6\'f7
\f0 (filter)
\f1 \'a3\'ba
\f0  
\f1 \'be\'cd\'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd
\f0 \
	
\f1 \'b3\'a1\'be\'b0\'a3\'ba
\f0  
\f1 \'b8\'f1\'ca\'bd\'ca\'fd\'be\'dd
\f0 \
	currency / number / date   vue1.x\
	vue2.x 
\f1 \'c8\'a1\'cf\'fb\'c1\'cb\'d7\'d4\'b4\'f8\'b9\'fd\'c2\'cb\'c6\'f7
\f0 ,  
\f1 \'d0\'e8\'d2\'aa\'d3\'c3\'bb\'a7\'d7\'d4\'d0\'d0\'b7\'e2\'d7\'b0
\f0 \
\
	
\f1 \'ca\'b9\'d3\'c3\'a3\'ba
\f0 	\{\{
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0  | 
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb
\f0 \}\}\
			\{\{
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0  | 
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb
\f0 (
\f1 \'b2\'ce\'ca\'fd
\f0 1,
\f1 \'b2\'ce\'ca\'fd
\f0 2)\}\}\
\
			v-
\f1 \'d6\'b8\'c1\'ee
\f0 ="
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0  | 
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb
\f0 (
\f1 \'b2\'ce\'ca\'fd
\f0 1,
\f1 \'b2\'ce\'ca\'fd
\f0 2)"\
			:
\f1 \'ca\'f4\'d0\'d4
\f0 ="
\f1 \'ca\'fd\'be\'dd
\f0 | ... "\
	
\f1 \'b6\'a8\'d2\'e5
\f0 :\
			a) Vue.filter('
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb\'b3\'c6
\f0 ',
\f1 \'ba\'af\'ca\'fd
\f0 (
\f1 \'d2\'aa\'b9\'fd\'c2\'cb\'b5\'c4\'d4\'aa\'ca\'fd\'be\'dd
\f0 ,
\f1 \'b2\'ce\'ca\'fd
\f0 ))\
			b) 
\f1 \'d1\'a1\'cf\'ee
\f0 \
				filters:\{\
					
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb\'b3\'c6
\f0 :
\f1 \'ba\'af\'ca\'fd
\f0 \
					
\f1 \'b9\'fd\'c2\'cb\'c6\'f7\'c3\'fb\'b3\'c6
\f0 2:
\f1 \'ba\'af\'ca\'fd
\f0 (
\f1 \'d2\'aa\'b9\'fd\'c2\'cb\'b5\'c4\'d4\'aa\'ca\'fd\'be\'dd
\f0 ,
\f1 \'b2\'ce\'ca\'fd
\f0 )\
				\}\
------------------------------------------------------------------------\
\

\f1 \'ca\'fd\'be\'dd\'bd\'bb\'bb\'a5\'a3\'ba
\f0 \
\
	vue-resource   
\f1 \'cf\'c2\'d4\'d8\'b0\'b2\'d7\'b0\'d2\'fd\'c8\'eb
\f0    vue1.x 
\f1 \'cd\'c6\'bc\'f6
\f0 	
\f1 \'d6\'a7\'b3\'d6
\f0 jsonp\
		
\f1 \'ca\'b9\'d3\'c3
\f0 :	
\f1 \'b7\'b5\'bb\'d8\'b5\'c4\'ca\'c7
\f0 promise
\f1 \'b6\'d4\'cf\'f3
\f0 \
		\
		this.$http(\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(successFn).catch(errorFn)\
		this.$http(\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(successFn,errorFn)\
\
		this.$http.get('url
\f1 \'b5\'d8\'d6\'b7
\f0 ?key=value&key=value').then(succFN,errorFn)\
		this.$http.get('url
\f1 \'b5\'d8\'d6\'b7
\f0 ',\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(succFN,errorFn)\
		this.$http.post('url
\f1 \'b5\'d8\'d6\'b7
\f0 ',\{
\f1 \'ca\'fd\'be\'dd
\f0 \},\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(succFN,errorFn)\
		this.$http.jsonp('url
\f1 \'b5\'d8\'d6\'b7
\f0 ',\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(succFN,errorFn)\
\
			
\f1 \'c5\'e4\'d6\'c3
\f0 :\
				url:'
\f1 \'b5\'d8\'d6\'b7
\f0 '\
				params: \{key:value\}  
\f1 \'d0\'af\'b4\'f8\'ca\'fd\'be\'dd
\f0   get\
				body: Object, FormData, string   post\
				headers: \{\}  
\f1 \'d0\'af\'b4\'f8\'c7\'eb\'c7\'f3\'cd\'b7
\f0 \
				method
\f1 \'a3\'ba
\f0 'get' get/post/.....   string\
				timeout: number  
\f1 \'b3\'ac\'ca\'b1
\f0 \
				progress
\f1 \'a3\'ba
\f0 fn   
\f1 \'bd\'f8\'b6\'c8
\f0 \
				credentials: false  
\f1 \'ca\'c7\'b7\'f1\'d0\'af\'b4\'f8\'bf\'e7\'d4\'b4\'c6\'be\'d6\'a4
\f0 \
				emulateJSON
\f1 \'a3\'ba
\f0 true post
\f1 \'c7\'eb\'c7\'f3\'ca\'c7\'d0\'e8\'d2\'aa\'d0\'af\'b4\'f8\'b5\'c4\'c7\'eb\'c7\'f3\'cd\'b7
\f0 \
				jsonp:'
\f1 \'bb\'d8\'b5\'f7\'ba\'af\'ca\'fd\'bc\'fc
\f0 ' 
\f1 \'c4\'ac\'c8\'cf\'ca\'c7
\f0 callback\
			
\f1 \'cf\'ec\'d3\'a6\'a3\'ba
\f0 \
				body      
\f1 \'b7\'b5\'bb\'d8\'b5\'c4\'ca\'fd\'be\'dd
\f0   
\f1 \'b6\'d4\'cf\'f3
\f0   (JSONP.parse)\
				bodyText  
\f1 \'b7\'b5\'bb\'d8\'b5\'c4\'ca\'fd\'be\'dd
\f0   
\f1 \'ce\'c4\'b1\'be\'b8\'f1\'ca\'bd
\f0   toString\
	
\f1 \'c0\'b9\'bd\'d8\'c6\'f7\'a3\'ba\'cf\'a3\'cd\'fb\'cb\'f9\'d3\'d0\'b5\'c4\'c7\'eb\'c7\'f3\'d4\'da\'b7\'a2\'b3\'f6\'d6\'ae\'c7\'b0\'bb\'f2\'ca\'fd\'be\'dd\'bb\'d8\'c0\'b4\'d6\'ae\'ba\'f3\'a3\'ac\'d7\'f6\'d2\'bb\'d0\'a9\'b5\'c4\'b4\'a6\'c0\'ed\'a3\'ac\'b8\'a8\'d6\'fa\'b9\'a4\'d7\'f7
\f0 ,
\f1 \'ca\'c7\'b8\'f6\'cd\'b3\'d2\'bb\'c5\'e4\'d6\'c3\'b5\'c4\'b9\'fd\'b3\'cc
\f0 \
		Vue.http.interceptors.push(function (request, next) \{//
\f1 \'c0\'b9\'bd\'d8\'c7\'eb\'c7\'f3
\f0 \
	      console.log('
\f1 \'c7\'eb\'c7\'f3\'b7\'a2\'b3\'f6\'c7\'b0\'a3\'ac\'d2\'aa\'d7\'f6\'b5\'c4\'c0\'b9\'bd\'d8
\f0 ');//
\f1 \'cf\'d4\'ca\'be
\f0 loading... \
	      next(function (response) \{\
	        console.log('
\f1 \'cf\'ec\'d3\'a6\'bb\'d8\'c0\'b4\'d6\'ae\'ba\'f3\'a3\'ac\'d2\'aa\'d7\'f6\'b5\'c4\'c0\'b9\'bd\'d8
\f0 ')//
\f1 \'b9\'d8\'b1\'d5
\f0 loading...  
\f1 \'ca\'fd\'be\'dd\'cd\'b3\'d2\'bb\'b4\'a6\'c0\'ed
\f0 \
	      \}); \
	    \});\
\
	
\f1 \'ca\'fd\'be\'dd\'bc\'e0\'cc\'fd\'a3\'ba\'bc\'e0\'cc\'fd\'b5\'bd\'ca\'fd\'be\'dd\'b5\'c4\'b1\'e4\'bb\'af
\f0 ,
\f1 \'c6\'f4\'b6\'af\'b4\'a6\'c0\'ed\'ba\'af\'ca\'fd
\f0 \
		1)	watch 
\f1 \'d1\'a1\'cf\'ee
\f0 |
\f1 \'ca\'f4\'d0\'d4
\f0    \uc0\u8730 \
			watch:\{data
\f1 \'c0\'ef\'c3\'e6\'b5\'c4\'ca\'f4\'d0\'d4\'c3\'fb
\f0 :
\f1 \'b4\'a6\'c0\'ed\'ba\'af\'ca\'fd
\f0 |
\f1 \'b6\'d4\'cf\'f3
\f0 \}\
			watch:\{\
				
\f1 \'d4\'aa\'ca\'fd\'be\'dd
\f0 :
\f1 \'ba\'af\'ca\'fd
\f0 (
\f1 \'d0\'c2\'d6\'b5\'a3\'ac\'c0\'cf\'d6\'b5
\f0 )\
				
\f1 \'d4\'aa\'ca\'fd\'be\'dd
\f0 :\{\
					handler:
\f1 \'ba\'af\'ca\'fd
\f0 (
\f1 \'d0\'c2\'d6\'b5\'a3\'ac\'c0\'cf\'d6\'b5
\f0 ),\
					deep: true   
\f1 \'c9\'ee\'b6\'c8\'bc\'ec\'b2\'e2
\f0    
\f1 \'c4\'ac\'c8\'cf
\f0 false\
				\}\
			\}\
------------------------------------------------------------\
	axios	
\f1 \'cf\'c2\'d4\'d8\'b0\'b2\'d7\'b0\'d2\'fd\'c8\'eb
\f0 	vue2.x
\f1 \'cd\'c6\'bc\'f6
\f0 		
\f1 \'b2\'bb\'d6\'a7\'b3\'d6
\f0 jsonp	2018-3-5\
		
\f1 \'cf\'a3\'cd\'fb\'bf\'c9\'d2\'d4
\f0 this.$http 
\f1 \'c8\'a5\'ca\'b9\'d3\'c3
\f0 axios
\f1 \'a3\'ac\'d0\'e8\'d2\'aa
\f0  
\f1 \'c5\'e4\'d6\'c3
\f0 : Vue.prototype.$http=axios;\
\
		this.$http|axios(\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(
\f1 \'b3\'c9\'b9\'a6\'bb\'d8\'b5\'f7
\f0 (res)).catch(
\f1 \'ca\'a7\'b0\'dc\'bb\'d8\'b5\'f7
\f0 (res))\
		this.$http|axios.get(url,\{
\f1 \'c5\'e4\'d6\'c3
\f0 \}).then(
\f1 \'b3\'c9\'b9\'a6\'bb\'d8\'b5\'f7
\f0 (res)).catch(
\f1 \'ca\'a7\'b0\'dc\'bb\'d8\'b5\'f7
\f0 (res))\
		this.$http|axios.post(url,pollfill).then(
\f1 \'b3\'c9\'b9\'a6\'bb\'d8\'b5\'f7
\f0 (res)).catch(
\f1 \'ca\'a7\'b0\'dc\'bb\'d8\'b5\'f7
\f0 (res))\
\
		post
\f1 \'c7\'eb\'c7\'f3
\f0 :\
			pollfill = new URLSearchParams() -> params.append('a', 111);\
			this.$http|axios.post(url,pollfill).then(
\f1 \'b3\'c9\'b9\'a6\'bb\'d8\'b5\'f7
\f0 (res)).catch(
\f1 \'ca\'a7\'b0\'dc\'bb\'d8\'b5\'f7
\f0 (res))\
\
			this.$http|axios(\{\
				url:'',\
				method:'post',\
				data:pollfill | string  post
\f1 \'cc\'e1\'bd\'bb
\f0 \
				headers\{xx:oo\}\
			\})\
\
		
\f1 \'c5\'e4\'d6\'c3
\f0 :\
			data:\{\} post
\f1 \'cc\'e1\'bd\'bb\'ca\'fd\'be\'dd
\f0 \
			
\f1 \'c6\'e4\'cb\'fb\'cd\'ac
\f0 resource\
		res:\
			data:  
\f1 \'ca\'fd\'be\'dd
\f0 \
------------------------------------------------------------------------\
\

\f1 \'d7\'f7\'d2\'b5\'a3\'ba
\f0 	\
	
\f1 \'b0\'d9\'b6\'c8\'cf\'c2\'c0\'ad\'a3\'ba\'d2\'aa\'c7\'f3\'a3\'ac\'bc\'fc\'c5\'cc\'b2\'d9\'d7\'f7\'a3\'ac
\f0 enter
\f1 \'cb\'d1\'cb\'f7
\f0 \
\
\
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f1 \cf2 day3:
\f0 \cf3 \
	  
\f1 \'ca\'b5\'c0\'fd
\f0 |
\f1 \'d7\'e9\'bc\'fe
\f0  
\f1 \'c9\'fa\'c3\'fc\'d6\'dc\'c6\'da
\f0 \
	beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed\
\
	
\f1 \'c8\'cf\'ca\'b6\'a3\'ba\'b9\'d2\'d4\'d8
\f0 |
\f1 \'b8\'fc\'d0\'c2\'a3\'ac\'b5\'c4
\f0 before->render(
\f1 \'c4\'da\'b2\'bf\'bb\'e1\'d6\'b4\'d0\'d0
\f0 )-> ed\
-----------------------------------------------------------------------\
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0

\f1 \cf3 \'d7\'e9\'bc\'fe
\f0 :\
	
\f1 \'bd\'e2\'ca\'cd\'a3\'ba
\f0 vue
\f1 \'d7\'e9\'bc\'fe\'bf\'d8\'d6\'c6\'d2\'bb\'c6\'ac
\f0 html
\f1 \'b4\'fa\'c2\'eb\'a3\'ac\'d2\'bb\'b8\'f6\'d3\'a6\'d3\'c3\'d3\'c9\'c8\'f4\'b8\'c9\'b8\'f6\'d7\'e9\'bc\'fe\'b9\'b9\'b3\'c9
\f0 \
	
\f1 \'b5\'e7\'c4\'d4\'a3\'ba
\f0 CPU
\f1 \'a3\'ac\'d6\'f7\'b0\'e5\'a3\'ac\'cf\'d4\'bf\'a8\'a3\'ac\'c4\'da\'b4\'e6\'a3\'ac\'d3\'b2\'c5\'cc
\f0 \
\

\f1 \'ca\'b9\'d3\'c3\'d7\'e9\'bc\'fe
\f0 :\
	<
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 ></
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 >\

\f1 \'b6\'a8\'d2\'e5\'d7\'e9\'bc\'fe
\f0 :\
	a)  let 
\f1 \'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf\'c3\'fb
\f0  = Vue.extend(\{
\f1 \'c5\'e4\'d6\'c3
\f0 \})\
	b)	let 
\f1 \'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed
\f0 =
\f1 \'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf
\f0  == \{\} \uc0\u8730 \
\

\f1 \'d7\'a2\'b2\'e1\'d7\'e9\'bc\'fe
\f0 :\
	a) Vue.component('
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 ',
\f1 \'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed
\f0 ==
\f1 \'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf
\f0 );\
	b) 
\f1 \'d7\'e9\'bc\'fe\'d1\'a1\'cf\'ee
\f0  components:\{'
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 ',
\f1 \'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf
\f0 \}\
\

\f1 \'d7\'e9\'bc\'fe\'ca\'fd\'be\'dd
\f0 \
	data 
\f1 \'d2\'aa\'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd\'a3\'ac\'c7\'d2\'d2\'aa\'d3\'d0\'b7\'b5\'bb\'d8\'d6\'b5
\f0  object\
\

\f1 \'c4\'a3\'b0\'e5\'a3\'ba
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf
\f0 : template: #id
\f1 \'c3\'fb
\f0 \
	<script type="x-template" id='id
\f1 \'c3\'fb
\f0 '\
	<tempate id='id
\f1 \'c3\'fb
\f0 '...\
\

\f1 \'d7\'e9\'bc\'fe\'a3\'a8\'b5\'a5\'ce\'c4\'bc\'fe
\f0 )\
	script + template + style\
	\
------------------------------------------------------------------------\
\

\f1 \'d7\'f7\'d2\'b5\'a3\'ba
\f0 \
	
\f1 \'cd\'ea\'c9\'c6
\f0  \
		
\f1 \'ce\'a2\'b2\'a9
\f0   \
		
\f1 \'d0\'ed\'d4\'b8\'c7\'bd
\f0   
\f1 \'d6\'b8\'c1\'ee
\f0   (
\f1 \'b7\'a2\'c9\'fa\'d4\'da
\f0 render
\f1 \'ca\'b1
\f0 )\
		
\f1 \'b2\'f0\'d7\'e9\'bc\'fe
\f0 :\
\
\
------------------------------------------------------------------------\
\
\
\cf2 day4:\
	
\f1 \cf3 \'d7\'e9\'bc\'fe\'ca\'fd\'be\'dd\'c1\'f7\'b6\'af
\f0 /
\f1 \'ca\'fd\'be\'dd\'b4\'ab\'b5\'dd
\f0 /
\f1 \'cd\'a8\'d1\'b6
\f0 \
	\
	
\f1 \'b8\'b8
\f0 ->
\f1 \'d7\'d3
\f0   
\f1 \'ca\'f4\'d0\'d4
\f0 (props)		\uc0\u8730 \
		<
\f1 \'d7\'d3
\f0  :
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'f4\'d0\'d4
\f0 ="
\f1 \'b8\'b8\'ca\'fd\'be\'dd
\f0 "></..>\
		
\f1 \'d7\'d3\'d7\'e9\'bc\'fe
\f0 :\
			
\f1 \'d1\'a1\'cf\'ee
\f0 \
			props:['
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'f4\'d0\'d4
\f0 ','
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'f4\'d0\'d4
\f0 2']   props:\{
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'f4\'d0\'d4
\f0 :\{type/default/required/...\}\}\
		
\f1 \'d5\'b9\'ca\'be
\f0 :	
\f1 \'d7\'d3\'c4\'a3\'b0\'e5
\f0 \
	
\f1 \'d7\'d3
\f0 ->
\f1 \'b8\'b8
\f0   
\f1 \'ca\'c2\'bc\'fe
\f0 (
\f1 \'d7\'d4\'b6\'a8\'d2\'e5
\f0 )\
\
		<
\f1 \'d7\'d3
\f0  @
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe
\f0 ="
\f1 \'b8\'b8\'b7\'bd\'b7\'a8
\f0 "></..>\
		
\f1 \'d7\'d3
\f0 :		this.$emit('
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe
\f0 ',
\f1 \'d7\'d3
\f0 .
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 ) \
		
\f1 \'b8\'b8
\f0 :		methods-> 
\f1 \'b8\'b8\'b7\'bd\'b7\'a8
\f0 (
\f1 \'bd\'d3\'ca\'dc\'ca\'fd\'be\'dd
\f0 )\{
\f1 \'b4\'a6\'c0\'ed
\f0 \}\
\
	
\f1 \'c6\'bd\'bc\'b6
\f0 :	
\f1 \'d7\'d3
\f0 A -> 
\f1 \'b8\'b8
\f0   ->  
\f1 \'d7\'d3
\f0 B    
\f1 \'d6\'d0\'bc\'e4\'c8\'cb
\f0  
\f1 \'a3\'a8
\f0 props+
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'c2\'bc\'fe\'a3\'a9
\f0 \
			
\f1 \'b6\'a9\'d4\'c4\'b7\'a2\'b2\'bc\'c4\'a3\'ca\'bd
\f0 (
\f1 \'bf\'e2
\f0 )\
\
			let bus = new Vue();		
\f1 \'b7\'b5\'bb\'d8
\f0   Vue
\f1 \'b6\'d4\'cf\'f3
\f0   \
\
			bus.$emit('
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'b5\'c4\'ca\'c2\'bc\'fe\'c3\'fb
\f0 ',
\f1 \'ca\'fd\'be\'dd
\f0 )\
        	bus.$on('
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'b5\'c4\'ca\'c2\'bc\'fe\'c3\'fb
\f0 ',function(
\f1 \'bd\'d3
\f0 )\{
\f1 \'b4\'a6\'c0\'ed
\f0 \})\
\
	refs:	
\f1 \'b8\'b8\'d7\'d3\'d6\'ae\'bc\'e4
\f0 		
\f1 \'b9\'b2\'cf\'ed\'ca\'fd\'be\'dd\'ba\'cd\'b7\'bd\'b7\'a8
\f0 \
		<
\f1 \'d7\'d3
\f0  ref="
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'d7\'d3\'c3\'fb\'b3\'c6
\f0 "></..>\
		<
\f1 \'d7\'d3
\f0  ref="
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'d7\'d3\'c3\'fb\'b3\'c6
\f0 2"></..>\
\
		
\f1 \'b8\'b8\'b7\'c3\'ce\'ca\'d7\'d3
\f0 :	this.$refs.
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'d7\'d3\'c3\'fb\'b3\'c6
\f0 .
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 /
\f1 \'b7\'bd\'b7\'a8
\f0 ()\
		
\f1 \'d7\'d3\'b7\'c3\'ce\'ca\'b8\'b8
\f0 :	this.$parent.
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 /
\f1 \'b7\'bd\'b7\'a8
\f0 ()\
\
		
\f1 \'b3\'a1\'be\'b0
\f0 :  
\f1 \'b5\'da\'c8\'fd\'b7\'bd\'b2\'e5\'bc\'fe\'b5\'c4\'bf\'aa\'b7\'a2
\f0    Swiper  ->   vue-swipe \
\
	
\f1 \'cd\'ac\'bc\'b6
\f0 <->
\f1 \'cd\'ac\'bc\'b6
\f0  
\f1 \'b6\'a9\'d4\'c4\'b7\'a2\'b2\'bc
\f0   new Vue()=bus  bus.$emit()/$on()\
		a)   
\f1 \'d7\'d3
\f0 A -> 
\f1 \'b8\'b8
\f0   ->  
\f1 \'d7\'d3
\f0 B    
\f1 \'d6\'d0\'bc\'e4\'c8\'cb
\f0 \
		b)   
\f1 \'b6\'a9\'d4\'c4\'b7\'a2\'b2\'bc\'c4\'a3\'ca\'bd
\f0 \
		c) 	web
\f1 \'b4\'e6\'b4\'a2
\f0 (cookie,localstroge/seession)\
		d) 	
\f1 \'b4\'e6\'bf\'e2
\f0 \
		e)  
\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed
\f0 \
---------------------------------------------------------------\
\

\f1 \'b6\'af\'cc\'ac\'d7\'e9\'bc\'fe
\f0 :	
\f1 \'ca\'b9\'d3\'c3\'d7\'e9\'bc\'fe
\f0 (
\f1 \'bf\'c9\'b6\'af\'cc\'ac
\f0 )  <
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 ></xx>\
	
\f1 \'b6\'af\'cc\'ac\'d7\'e9\'bc\'fe\'a3\'ba
\f0  
\f1 \'d7\'e9\'bc\'fe\'b6\'af\'cc\'ac\'bb\'af
\f0 (
\f1 \'ca\'fd\'be\'dd\'bb\'af
\f0 )\
	<component is="'
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 '"></component>\
	<component :is="
\f1 \'ca\'fd\'be\'dd
\f0 "></component>\
\

\f1 \'c4\'da\'c8\'dd\'b7\'d6\'b7\'a2\'a3\'ba\'cd\'d8\'d5\'b9\'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\
<aa>\
<h3>aa\'d7\'e9\'bc\'fe\'d4\'d9\'cd\'d8\'d5\'b9\'d2\'bb\'b8\'f6h3</h3> //\'d5\'e2\'d1\'f9\'d0\'b4\'d3\'d0\'ce\'ca\'cc\'e2 \'d7\'e9\'bc\'feaa\'c0\'ef\'c3\'e6\'c3\'bb\'d3\'d0\'b2\'e5\'b2\'db \'c3\'bb\'b7\'a8\'bc\'d3\'bd\'f8\'c8\'a5h3\
</aa>\
\'c0\'fb\'d3\'c3\'b2\'e5\'b2\'db\
aa\'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'d4\'a4\'c1\'f4\'d2\'bb\'b8\'f6\'b2\'e5\'b2\'db\'b5\'c4\'b2\'db\'ce\'bb\
<aa>\
<h3 v-slot:s1  
\f3\fs27\fsmilli13600 \cf4 \cb5 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 v-slot:s1=\cf6 \strokec6 "slotProps"
\f1\fs24 \cf3 \cb1 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 >\
aa\'d7\'e9\'bc\'fe\'d4\'d9\'cd\'d8\'d5\'b9\'d2\'bb\'b8\'f6h3\
\pard\pardeftab720\sl380\partightenfactor0

\f3\fs27\fsmilli13600 \cf7 \cb5 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec7 \{\{ slotProps.user.firstName \}\}
\f1\fs24 \cf3 \cb1 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 \
\pard\tx566\tx1133\tx1700\tx2267\tx2834\tx3401\tx3968\tx4535\tx5102\tx5669\tx6236\tx6803\pardirnatural\partightenfactor0
\cf3 </h3> //\'b6\'a8\'d2\'e5\'d2\'bb\'b8\'f6\'b2\'db\'c3\'fb\'ba\'cd\'b2\'db\'ce\'bb\'c3\'fb\'d2\'bb\'d2\'bb\'b6\'d4\'d3\'a6\
</aa>\
\
<template>\
<div>\
	<slot name=\'a1\'aes1\'a1\'af 
\f3\fs27\fsmilli13600 \cf4 \cb5 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec4 v-bind:user=\cf6 \strokec6 "user"
\f1\fs24 \cf3 \cb1 \kerning1\expnd0\expndtw0 \outl0\strokewidth0 ></slot> //\'d4\'a4\'c1\'f4\'d2\'bb\'b8\'f6\'b2\'db\'ce\'bb\
	<p>\'ce\'d2\'ca\'c7aa\'d7\'e9\'bc\'fe</p>\
</div>\
</template>\

\f0 \
	template:	slot 
\f1 \'d7\'e9\'bc\'fe\'b2\'db\'ce\'bb
\f0   <slot 
\f1 \'ca\'f4\'d0\'d4\'a3\'ba
\f0 name=
\f1 \'b2\'db\'c3\'fb
\f0 \
	<
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 ><
\f1 \'b1\'ea\'c7\'a9
\f0  slot="
\f1 \'b2\'db\'c3\'fb
\f0 ">
\f1 \'c4\'da\'c8\'dd
\f0 </..</...\
\
---------------------------------------------------------------\
\
vue
\f1 \'b6\'af\'bb\'ad
\f0 \
\
	
\f1 \'b6\'af\'bb\'ad\'d7\'e9\'bc\'fe
\f0 : transition|transition-group	
\f1 \'cb\'ad\'d7\'f6\'b6\'af\'bb\'ad\'a3\'ac\'be\'cd\'b0\'fc\'d7\'c5\'cb\'ad
\f0 \
	\
	
\f1 \'d7\'e9\'bc\'fe\'ca\'f4\'d0\'d4
\f0 :\
		name =  "
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 "\
		enter-class = "
\f1 \'c0\'e0\'c3\'fb
\f0 "\
		enter-active-class = "
\f1 \'c0\'e0\'c3\'fb
\f0 "\
		leave-class = "
\f1 \'c0\'e0\'c3\'fb
\f0 "\
		leave-active-class = "
\f1 \'c0\'e0\'c3\'fb
\f0 "\
	
\f1 \'d1\'f9\'ca\'bd\'a3\'ba
\f0 \
		.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -enter\{..\}  
\f1 \'c8\'eb\'b3\'a1\'c7\'b0
\f0 (
\f1 \'b4\'f2\'c4\'c4\'c0\'b4
\f0 )\
		.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -enter-active\{..\} 
\f1 \'c8\'eb\'b3\'a1\'ba\'f3
\f0 (
\f1 \'c0\'b4\'c1\'cb\'cd\'a3\'c4\'c4
\f0 )\
		.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -leave\{..\} 
\f1 \'c0\'eb\'b3\'a1\'c7\'b0
\f0 \
		.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -leave-active\{..\} 
\f1 \'c0\'eb\'bf\'aa\'b3\'a1\'ba\'f3
\f0 (
\f1 \'b5\'bd\'c4\'c4\'c8\'a5
\f0 )\
\
	transition
\f1 \'d7\'e9\'bc\'fe\'ca\'c2\'bc\'fe
\f0 :\
		@before-enter="
\f1 \'b7\'bd\'b7\'a8
\f0 (el)"   el==
\f1 \'d7\'f6\'b6\'af\'bb\'ad\'b5\'c4\'d4\'aa\'cb\'d8
\f0 (
\f1 \'d4\'ad\'c9\'fa
\f0 )\
		@enter="
\f1 \'b7\'bd\'b7\'a8
\f0 "\
		@after-enter="
\f1 \'b7\'bd\'b7\'a8
\f0 "\
		@before-leave="
\f1 \'b7\'bd\'b7\'a8
\f0 "\
		@leave="
\f1 \'b7\'bd\'b7\'a8
\f0 "\
		@after-leave="
\f1 \'b7\'bd\'b7\'a8
\f0 "\
\
	1) css3\
		transition
\f1 \'a3\'ba\'ce\'de\'cc\'f8\'b1\'e4
\f0 \
			.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -enter\{..\} 
\f1 \'b4\'f2\'c4\'c4\'c0\'b4
\f0    +   .
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -leave-active\{..\} 
\f1 \'b5\'bd\'c4\'c4\'c8\'a5
\f0 \
		animation
\f1 \'a3\'ba\'d3\'d0\'cc\'f8\'b1\'e4
\f0 \
			.
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -enter-active\{
\f1 \'d6\'b8\'b6\'a8\'c8\'eb\'b3\'a1
\f0 \} 
\f1 \'c0\'b4\'c1\'cb\'cd\'a3\'c4\'c4
\f0  + .
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0 -leave-active\{
\f1 \'d6\'b8\'b6\'a8\'c0\'eb\'b3\'a1
\f0 \}
\f1 \'b5\'bd\'c4\'c4\'c8\'a5
\f0 \
	2) css
\f1 \'bf\'e2
\f0  animate.css\
		
\f1 \'cd\'ac
\f0  animation 
\f1 \'d3\'d0\'cc\'f8\'b1\'e4
\f0 \
	3) js
\f1 \'bf\'e2
\f0  
\f1 \'b6\'af\'bb\'ad\'c3\'fb
\f0   
\f1 \'d0\'e8\'d2\'aa\'c9\'e8\'b6\'a8\'b3\'f5\'ca\'bc\'ce\'bb\'d6\'c3
\f0 \
		
\f1 \'cf\'c2\'d4\'d8
\f0  velocity.js   http://velocityjs.org/\
		
\f1 \'ca\'b9\'d3\'c3
\f0 :	Velocity(el,\{css
\f1 \'ca\'f4\'d0\'d4
\f0 \},\{
\f1 \'c5\'e4\'d6\'c3
\f0 \})\
\
		
\f1 \'c5\'e4\'d6\'c3
\f0 :\
			duration: 
\f1 \'ba\'c1\'c3\'eb
\f0    
\f1 \'ca\'c2\'bc\'fe
\f0 \
			easing: 
\f1 \'b6\'af\'bb\'ad\'c0\'e0\'b1\'f0
\f0  ''\
			Queue\
			complete:fn()\
			progress:fn\
			loop: 1 
\f1 \'b4\'ce
\f0   true
\f1 \'ce\'de\'cf\'de
\f0 \
			delay: 
\f1 \'ba\'c1\'c3\'eb
\f0  
\f1 \'d1\'d3\'ca\'b1
\f0 \
			display:'none/block' 
\f1 \'b6\'af\'bb\'ad\'bd\'e1\'ca\'f8\'ca\'b1\'ca\'c7\'b7\'f1\'bf\'c9\'bc\'fb
\f0 \
		
\f1 \'d7\'a2\'d2\'e2\'a3\'ba
\f0 \
			leave(el,done)\{\}\
	\
transition-group:\
	
\f1 \'d2\'bb\'d7\'e9\'b6\'af\'bb\'ad
\f0 \
	transition-group 
\f1 \'b0\'fc\'d7\'c5\'d2\'bb\'d7\'e9\'d4\'aa\'cb\'d8
\f0   
\f1 \'a3\'ac\'c3\'bf\'b8\'f6\'d4\'aa\'cb\'d8\'d2\'aa\'d3\'d0
\f0 key  
\f1 \'c6\'e4\'cb\'fb\'b5\'c4\'cd\'ac
\f0 transition\
\
\

\f1 \'d7\'f7\'d2\'b5\'a3\'ba
\f0 \
	
\f1 \'c1\'f4\'d1\'d4\'b0\'e5\'a1\'a2\'b0\'d9\'b6\'c8\'cf\'c2\'c0\'ad\'a3\'ac
\f0 ...   
\f1 \'cc\'ed\'bc\'d3
\f0 VUE 
\f1 \'b6\'af\'bb\'ad
\f0 \
\
---------------------------------------------------------------\

\f1 \'c2\'b7\'d3\'c9
\f0 :\
	SPA:   single page application   
\f1 \'b5\'a5\'d2\'b3\'c3\'e6\'d3\'a6\'d3\'c3
\f0 \
	
\f1 \'cc\'d8\'b5\'e3\'a3\'ba
\f0  
\f1 \'cb\'d9\'b6\'c8\'bf\'ec\'a3\'ac\'ca\'fd\'be\'dd
\f0 ajax
\f1 \'c7\'eb\'c7\'f3\'a3\'ac\'cd\'a8\'b9\'fd\'c2\'b7\'d3\'c9\'a3\'ac\'d2\'b3\'c3\'e6\'b2\'bb\'bb\'e1\'d5\'fb\'cc\'e5\'d6\'d8\'d4\'d8
\f0 \
	
\f1 \'ca\'b5\'cf\'d6
\f0 :  
\f1 \'c2\'b7\'d3\'c9
\f0  -> 
\f1 \'bc\'d3\'d4\'d8
\f0 (ajax)
\f1 \'b6\'d4\'d3\'a6\'b5\'c4\'c4\'da\'c8\'dd
\f0   
\f1 \'b8\'e6\'cb\'df\'c4\'e3\'c8\'a5\'c4\'c4
\f0 ?  
\f1 \'b8\'f9\'be\'dd
\f0 url
\f1 \'b5\'c4\'b2\'bb\'cd\'ac\'a3\'ac\'bc\'d3\'d4\'d8\'d7\'e9\'bc\'fe
\f0 \
	
\f1 \'c8\'b1\'b5\'e3
\f0 :  SEO
\f1 \'d3\'c5\'bb\'af
\f0 ,\
	 \

\f1 \'c2\'b7\'d3\'c9\'d2\'aa\'c7\'f3\'a3\'ba
\f0  
\f1 \'d2\'fd\'c8\'eb
\f0  vue-router.js\
\

\f1 \'c2\'b7\'d3\'c9\'ca\'b9\'d3\'c3\'c1\'f7\'b3\'cc\'a3\'ba
\f0 \
	0.	src vue-router\
	1. 
\f1 \'ca\'b9\'d3\'c3\'c2\'b7\'d3\'c9
\f0  (
\f1 \'c8\'a5\'c4\'c4
\f0 )\
		<router-link to="/home">
\f1 \'ca\'d7\'d2\'b3
\f0 </router-link>\
  		<router-view>
\f1 \'d5\'b9\'ca\'be\'c7\'f8
\f0 </router-view>\
  		router-link 
\f1 \'d7\'e9\'bc\'fe\'ca\'f4\'d0\'d4
\f0   \
			tag='li' 
\f1 \'d6\'b8\'b6\'a8\'b1\'e0\'d2\'eb\'ba\'f3\'b5\'c4\'b1\'ea\'c7\'a9
\f0 \
			active-class='
\f1 \'c0\'e0\'c3\'fb
\f0 ' 
\f1 \'d6\'b8\'b6\'a8\'bc\'a4\'bb\'ee\'ba\'f3\'b5\'c4\'d1\'f9\'ca\'bd
\f0 \
	2. 
\f1 \'c5\'e4\'d6\'c3\'c2\'b7\'d3\'c9
\f0 (
\f1 \'bd\'a8\'c1\'a2\'d7\'e9\'bc\'fe\'ba\'cd\'c7\'eb\'c7\'f3\'b5\'c4\'b6\'d4\'d3\'a6\'b9\'d8\'cf\'b5
\f0 )	
\f1 \'ca\'fd\'d7\'e9
\f0 \
		[\{path:'/home',component:home\},,\{\}]\
		path 
\f1 \'c2\'b7\'be\'b6
\f0 \
		component: 
\f1 \'d6\'b8\'cf\'f2\'b5\'c4\'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf\'c3\'fb
\f0 \
	3. 
\f1 \'b4\'b4\'bd\'a8\'c2\'b7\'d3\'c9\'b6\'d4\'cf\'f3
\f0 (
\f1 \'b4\'ab\'b5\'dd\'c5\'e4\'d6\'c3
\f0 )\
		router = new VueRouter(
\f1 \'c5\'e4\'d6\'c3
\f0 )\
		
\f1 \'c5\'e4\'d6\'c3
\f0 :	\{routes:
\f1 \'ca\'fd\'d7\'e9
\f0 \}\
	4. 
\f1 \'b6\'a5\'b2\'e3
\f0 |
\f1 \'b8\'f9\'d7\'e9\'bc\'fe\'a3\'ac\'d7\'a2\'b2\'e1\'c2\'b7\'d3\'c9
\f0  
\f1 \'a3\'a8\'c2\'b7\'d3\'c9\'bf\'d8\'d6\'c6\'d2\'b3\'c3\'e6\'d7\'e9\'bc\'fe\'b5\'c4\'bc\'d3\'d4\'d8\'a3\'a9
\f0 \
		
\f1 \'d1\'a1\'cf\'ee
\f0 \
			router(
\f1 \'d1\'a1\'cf\'ee
\f0 ):router (router
\f1 \'b6\'d4\'cf\'f3
\f0 )\

\f1 \'d7\'d3\'c2\'b7\'d3\'c9\'a3\'ba
\f0 children\
	routes=[\
		\{\},\
		\{\
			path:xx\
			component:xx\
			children:[  
\f1 \'d7\'d3\'c2\'b7\'d3\'c9
\f0 \
				\{\}\
				..\
			]\
		\},\
		\{\}\
	]\
\

\f1 \'b2\'ce\'ca\'fd\'c5\'e4\'d6\'c3
\f0 :\
	\{path:'xx/:
\f1 \'b2\'ce\'ca\'fd\'b1\'e4\'c1\'bf
\f0 ',component:xx,name:''\}\
\

\f1 \'b4\'ab\'b5\'dd\'b2\'ce\'ca\'fd
\f0  and 
\f1 \'ca\'fd\'be\'dd
\f0 \
router-link to='xx/
\f1 \'b2\'ce\'ca\'fd
\f0 ?a=1&b=2'\
router-link :to='\{name:'xx',params:\{\},query:\{\}\}'\
\

\f1 \'bd\'d3\'ca\'d5\'b2\'ce\'ca\'fd\'ba\'cd\'ca\'fd\'be\'dd
\f0 \
	\{\{this.$route.params|query|path\}\}\
\

\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'a3\'ba
\f0  this == 
\f1 \'d7\'e9\'bc\'fe
\f0    this.
\f1 \'b7\'bd\'b7\'a8
\f0 |
\f1 \'ca\'fd\'be\'dd
\f0  
\f1 \'b7\'c3\'ce\'ca\'d7\'e9\'bc\'fe\'d7\'d4\'bc\'ba\'b5\'c4
\f0   this.$xxx 
\f1 \'b7\'c3\'ce\'ca\'c8\'ab\'be\'d6
\f0 \
		   this.$router\

\f1 \'d7\'e9\'bc\'fe\'c4\'a3\'b0\'e5\'a3\'ba
\f0 	\{\{xxx\}\}  
\f1 \'d7\'d3\'b8\'f6\'b5\'c4\'ca\'fd\'be\'dd
\f0   \{\{this.$router\}\} 
\f1 \'c8\'ab\'be\'d6\'ca\'fd\'be\'dd
\f0 \
			@
\f1 \'ca\'c2\'bc\'fe
\f0 ="$router.xx()"\
\

\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'ca\'b5\'cf\'d6\'c2\'b7\'d3\'c9\'cc\'f8\'d7\'aa
\f0 :\
	router.push(...)\
	this.$router.push(\{path:'...'\})   
\f1 \'cc\'ed\'bc\'d3\'d2\'bb\'b8\'f6\'c2\'b7\'d3\'c9
\f0  
\f1 \'a3\'a8\'bc\'c7\'c2\'bc\'b5\'bd\'c0\'fa\'ca\'b7\'bc\'c7\'c2\'bc
\f0 )\
	this.$router.replace(\{path:'...'\})   
\f1 \'cc\'e6\'bb\'bb\'d2\'bb\'b8\'f6\'c2\'b7\'d3\'c9
\f0  
\f1 \'a3\'a8\'b2\'bb\'bc\'c7\'c2\'bc\'b5\'bd\'c0\'fa\'ca\'b7\'bc\'c7\'c2\'bc
\f0 )\
	this.$router.go(-1|1)|goBack()  
\f1 \'bb\'d8\'cd\'cb
\f0 /
\f1 \'c7\'b0\'bd\'f8
\f0   history.go|goBack\
	\

\f1 \'c2\'b7\'d3\'c9\'ca\'d8\'ce\'c0
\f0 :\
		beforeRouteEnter(to,from,next)\{\}	
\f1 \'c7\'b0\'d6\'c3\'ca\'d8\'ce\'c0
\f0 ,
\f1 \'bd\'f8\'c8\'eb
\f0 \
			to 
\f1 \'c4\'bf\'b1\'ea\'c2\'b7\'d3\'c9
\f0 \
			from 
\f1 \'b5\'b1\'c7\'b0\'c2\'b7\'d3\'c9
\f0 \
			next 
\f1 \'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd
\f0   next() == next(true)  
\f1 \'cc\'f8\'d7\'aa
\f0 \
						   next(false) 
\f1 \'b2\'bb\'c8\'c3\'cc\'f8\'d7\'aa
\f0   \
			\
		beforeRouteLeave(to,from,next)\{\}  
\f1 \'ba\'f3\'d6\'c3\'ca\'d8\'ce\'c0
\f0 ,
\f1 \'c0\'eb\'bf\'aa
\f0 \
\
	
\f1 \'c2\'b7\'d3\'c9\'ca\'fd\'be\'dd\'d4\'a4\'d4\'d8
\f0 :\
		beforeRouteEnter(to,from,next)\{\
			1. 
\f1 \'b6\'b5\'bf\'e2
\f0  this.$http   axios
\f1 \'bf\'c9\'d3\'c3
\f0 \
			2. next( _this => _this.
\f1 \'ca\'f4\'d0\'d4
\f0 ="
\f1 \'c4\'c3\'b5\'bd\'b5\'c4\'ca\'fd\'be\'dd
\f0 ")\
				
\f1 \'d7\'a2\'d2\'e2
\f0 : this
\f1 \'b2\'bb\'bf\'c9\'d2\'d4\'b7\'c3\'ce\'ca
\f0 , 
\f1 \'d7\'e9\'bc\'fe\'ce\'b4\'ca\'b5\'c0\'fd\'bb\'af
\f0 \
		\}\
\
\
\cf2 day5:\
\cf3 \
webpack:	\
	
\f1 \'b8\'c9\'c2\'ef\'b5\'c4
\f0 :	
\f1 \'cf\'ee\'c4\'bf\'b9\'dc\'c0\'ed\'a1\'a2\'b4\'f2\'b0\'fc\'a1\'a2\'c4\'a3\'bf\'e9\'b9\'dc\'c0\'ed\'a1\'a2\'bc\'d3\'d4\'d8\'d7\'ca\'d4\'b4
\f0 (js/css/html/png../woff/data/vue...),
\f1 \'d7\'aa\'bb\'bb\'c6\'f7
\f0 (loader)\
	
\f1 \'c7\'b0\'c9\'ed\'a3\'ba
\f0 grunt/gulp/browserify->webpack\
\
	
\f1 \'b9\'d9\'cd\'f8\'a3\'ba
\f0 http://webpack.github.io/  1.x  2.x\
		  https://webpack.js.org/    3.x \
\
webpack
\f1 \'b5\'c4\'c0\'fa\'ca\'b7
\f0 \
	webpack1
\f1 \'d6\'a7\'b3\'d6
\f0 CMD
\f1 \'ba\'cd
\f0 AMD
\f1 \'a3\'ac\'cd\'ac\'ca\'b1\'d3\'b5\'d3\'d0\'b7\'e1\'b8\'bb\'b5\'c4
\f0 plugin
\f1 \'ba\'cd
\f0 loader
\f1 \'a3\'ac
\f0 webpack
\f1 \'d6\'f0\'bd\'a5\'b5\'c3\'b5\'bd\'b9\'e3\'b7\'ba\'d3\'a6\'d3\'c3\'a1\'a3
\f0 \
	webpack2 
\f1 \'d6\'a7\'b3\'d6
\f0 ES Module
\f1 \'a3\'ac\'b7\'d6\'ce\'f6
\f0 ESModule
\f1 \'d6\'ae\'bc\'e4\'b5\'c4\'d2\'c0\'c0\'b5\'b9\'d8\'cf\'b5\'a3\'ac
\f0 webpack1
\f1 \'b1\'d8\'d0\'eb\'bd\'ab
\f0 ES
\f1 \'a3\'ac
\f0 Module
\f1 \'d7\'aa\'bb\'bb\'b3\'c9
\f0 CommonJS
\f1 \'c4\'a3\'bf\'e9\'a3\'ac
\f0 2
\f1 \'d6\'a7\'b3\'d6
\f0 tree sharking\
	webpack3 
\f1 \'d0\'c2\'b5\'c4\'cc\'d8\'d0\'d4\'b4\'f3\'b6\'bc\'ce\'a7\'c8\'c6
\f0 ES Module
\f1 \'cc\'e1\'b3\'f6\'a3\'ac\'c8\'e7
\f0 Scope Hoisting
\f1 \'ba\'cd
\f0 Magic Comment
\f1 \'a3\'bb
\f0 \
\

\f1 \'ca\'b9\'d3\'c3\'c1\'f7\'b3\'cc
\f0 :\
	
\f1 \'b0\'b2\'d7\'b0
\f0 : 
\f1 \'cc\'f5\'bc\'fe
\f0    node + npm/yarn/bower
\f1 \'bb\'b7\'be\'b3
\f0 \
		1.	
\f1 \'c8\'ab\'be\'d6\'bb\'b7\'be\'b3\'b0\'b2\'d7\'b0
\f0    npm install webpack -g   
\f1 \'d7\'b0\'b5\'c4\'ca\'c7\'c3\'fc\'c1\'ee\'d0\'d0\'b9\'a4\'be\'df
\f0 \
		2.	
\f1 \'cf\'ee\'c4\'bf\'bb\'b7\'be\'b3\'b0\'b2\'d7\'b0
\f0    npm init -y -> npm install webpack -D  
\f1 \'d7\'b4\'cc\'ac\'b5\'c4\'ca\'c7\'cf\'ee\'c4\'bf\'b9\'dc\'c0\'ed\'bb\'b7\'be\'b3
\f0 \
	
\f1 \'b4\'f2\'b0\'fc
\f0 :\
		webpack a.js b.js	
\f1 \'b0\'d1
\f0 a
\f1 \'ce\'c4\'bc\'fe\'b4\'f2\'b0\'fc\'b5\'bd
\f0 b\
	
\f1 \'bc\'d3\'d4\'d8\'d7\'ca\'d4\'b4
\f0 :\
		
\f1 \'b7\'c7
\f0 js
\f1 \'b5\'c4\'d7\'ca\'d4\'b4\'a3\'ac\'d0\'e8\'d2\'aa
\f0 loader(
\f1 \'d7\'aa\'bb\'bb\'c6\'f7
\f0 ),loader
\f1 \'be\'cd\'ca\'c7\'b8\'f6\'b0\'fc
\f0 \
\
		
\f1 \'bc\'d3\'d4\'d8
\f0 css : 	npm install css-loader style-loader\
\
	webpack
\f1 \'cf\'ee\'c4\'bf\'c5\'e4\'d6\'c3
\f0 :	webpack.config.js	
\f1 \'be\'cd\'ca\'c7\'d2\'bb\'b8\'f6
\f0 node
\f1 \'b3\'cc\'d0\'f2
\f0 \
		webpack.config.js:  
\f1 \'c5\'e4\'d6\'c3\'d2\'bb\'d0\'a9
\f0 webpack
\f1 \'cf\'e0\'b9\'d8\'d0\'c5\'cf\'a2
\f0 (
\f1 \'c8\'eb\'bf\'da\'a3\'ac\'b3\'f6\'bf\'da\'c4\'a3\'bf\'e9\'a3\'ac
\f0 loader)\
\
		
\f1 \'c3\'fc\'c1\'ee\'d0\'d0\'a3\'ba
\f0 webpack  
\f1 \'b2\'ce\'ca\'fd
\f0 \
			
\f1 \'b2\'ce\'ca\'fd\'a3\'ba
\f0  p 
\f1 \'d1\'b9\'cb\'f5
\f0  
\f1 \'d0\'e8\'d2\'aa\'d1\'b9\'cb\'f5\'b9\'a4\'be\'df
\f0   -w 
\f1 \'ca\'b5\'ca\'b1\'bc\'e0\'cc\'fd\'d7\'d4\'b6\'af\'b4\'f2\'b0\'fc
\f0  -d 
\f1 \'bf\'aa\'c6\'f4
\f0 source-map
\f1 \'c4\'a3\'ca\'bd
\f0 \
		es6 
\f1 \'d7\'aa
\f0  es5 : babel-loader babel-core babel-preset-es2015\
\
\
	
\f1 \'c4\'a3\'bf\'e9\'b9\'dc\'c0\'ed
\f0 :\
		module:\{\
			rules:[\
				\{test:'
\f1 \'d2\'aa\'d7\'aa\'bb\'bb\'b5\'c4\'ce\'c4\'bc\'fe
\f0 ',use:['
\f1 \'d2\'aa\'ca\'b9\'d3\'c3\'b5\'c4
\f0 loader1','loader2']\}\
			]\
		\}\
	\
------------------------------------------------------------------------------------\
\

\f1 \'d0\'e8\'d2\'aa\'d7\'d4\'b6\'af\'cb\'a2\'d0\'c2\'e4\'af\'c0\'c0\'c6\'f7
\f0 (webpack
\f1 \'b4\'ee\'bd\'a8\'c7\'b0\'b6\'cb
\f0 web
\f1 \'b7\'fe\'ce\'f1\'c6\'f7\'b5\'c4\'b9\'a4\'be\'df
\f0 webpack-dev-server)\

\f1 \'b0\'b2\'d7\'b0
\f0 :	npm install webpack-dev-server -g\
	webpack-dev-server 
\f1 \'bf\'aa\'c6\'f4
\f0 web
\f1 \'b7\'fe\'ce\'f1\'c6\'f7
\f0   localhost:8080\
	webpack-dev-server 
\f1 \'b2\'ce\'ca\'fd
\f0 \
		
\f1 \'b2\'ce\'ca\'fd
\f0 :	--port 8001  
\f1 \'b8\'c4\'b6\'cb\'bf\'da
\f0 \
				--open 
\f1 \'bf\'aa\'c6\'f4\'e4\'af\'c0\'c0\'c6\'f7
\f0 \
				--hot 
\f1 \'c8\'c8\'d6\'d8\'d4\'d8
\f0 (
\f1 \'be\'d6\'b2\'bf\'d0\'de\'b8\'c4
\f0 )   old\
				--inline 
\f1 \'c8\'c8\'d6\'d8\'d4\'d8
\f0 (
\f1 \'be\'d6\'b2\'bf\'d0\'de\'b8\'c4
\f0 )  news\
	
\f1 \'b2\'ce\'ca\'fd\'c5\'e4\'d6\'c3\'b7\'bd\'ca\'bd
\f0 :\
		webpack.config.js\
			devServer:\{ //webpack-dev-server 
\f1 \'c5\'e4\'d6\'c3
\f0 \
			    port: 8001,\
			    open: true\
			  \}\
		package.json -> scripts\
			"start|dev":"webpack-dev-server --port xxxx --open"\
			npm start\
\

\f1 \'d7\'f7\'d2\'b5\'a3\'ba
\f0 \
	webpack 
\f1 \'b4\'ee\'bd\'a8\'c7\'b0\'b6\'cb\'bf\'aa\'b7\'a2\'bb\'b7\'be\'b3
\f0 \
		
\f1 \'b8\'c4\'d7\'b0
\f0 canvas
\f1 \'d3\'ce\'cf\'b7
\f0 |
\f1 \'c0\'e0
\f0 ->
\f1 \'c4\'a3\'bf\'e9
\f0 ->
\f1 \'ca\'e4\'b3\'f6
\f0 ->
\f1 \'ca\'e4\'c8\'eb
\f0 \
\
------------------------------------------------------------------------------------\
\

\f1 \'bd\'c5\'ca\'d6\'bc\'dc
\f0 : vue-cli  
\f1 \'b4\'ee\'bd\'a8
\f0 vue
\f1 \'cf\'ee\'c4\'bf\'bb\'b7\'be\'b3
\f0 \
\

\f1 \'b0\'b2\'d7\'b0
\f0  npm instal vue-cli -g          vue --version\
\

\f1 \'b4\'b4\'bd\'a8\'cf\'ee\'c4\'bf\'bb\'b7\'be\'b3
\f0 : \
	vue init webpack-simple 
\f1 \'c4\'bf\'c2\'bc
\f0     webpack-simple|webpack  
\f1 \'c4\'a3\'b0\'e5
\f0 \
	cd 
\f1 \'c4\'bf\'c2\'bc
\f0 \
	npm install\
	npm run dev  
\f1 \'d4\'cb\'d0\'d0
\f0 \
	
\f1 \'bf\'aa\'b7\'a2
\f0 ....\
	npm run build 
\f1 \'b4\'f2\'b0\'fc
\f0 \
\
\

\f1 \'c4\'a3\'bf\'e9\'bb\'af\'c2\'b7\'d3\'c9
\f0    npm install vue-router -D\
	0.	import VueRoter from 'vue-router'  -> Vue.use(VueRouter) 
\f1 \'b0\'b2\'d7\'b0
\f0 \
	1. 
\f1 \'ca\'b9\'d3\'c3\'c2\'b7\'d3\'c9
\f0  (
\f1 \'c8\'a5\'c4\'c4
\f0 )\
		<router-link to="/home">
\f1 \'ca\'d7\'d2\'b3
\f0 </router-link>\
  		<router-view>
\f1 \'d5\'b9\'ca\'be\'c7\'f8
\f0 </router-view>\
  		router-link 
\f1 \'d7\'e9\'bc\'fe\'ca\'f4\'d0\'d4
\f0   \
			tag='li' 
\f1 \'d6\'b8\'b6\'a8\'b1\'e0\'d2\'eb\'ba\'f3\'b5\'c4\'b1\'ea\'c7\'a9
\f0 \
			active-class='
\f1 \'c0\'e0\'c3\'fb
\f0 ' 
\f1 \'d6\'b8\'b6\'a8\'bc\'a4\'bb\'ee\'ba\'f3\'b5\'c4\'d1\'f9\'ca\'bd
\f0 \
	2. 
\f1 \'c5\'e4\'d6\'c3\'c2\'b7\'d3\'c9
\f0 (
\f1 \'bd\'a8\'c1\'a2\'d7\'e9\'bc\'fe\'ba\'cd\'c7\'eb\'c7\'f3\'b5\'c4\'b6\'d4\'d3\'a6\'b9\'d8\'cf\'b5
\f0 )	
\f1 \'ca\'fd\'d7\'e9
\f0 \
		[\{path:'/home',component:home\},,\{\}]\
		path 
\f1 \'c2\'b7\'be\'b6
\f0 \
		component: 
\f1 \'d6\'b8\'cf\'f2\'b5\'c4\'d7\'e9\'bc\'fe\'b1\'e4\'c1\'bf\'c3\'fb
\f0 \
	3. 
\f1 \'b4\'b4\'bd\'a8\'c2\'b7\'d3\'c9
\f0 (
\f1 \'b4\'ab\'b5\'dd\'c5\'e4\'d6\'c3
\f0 )\
		router = new VueRouter(
\f1 \'c5\'e4\'d6\'c3
\f0 )\
		
\f1 \'c5\'e4\'d6\'c3
\f0 :	\{routes:
\f1 \'ca\'fd\'d7\'e9
\f0 \}\
	4. 
\f1 \'b6\'a5\'b2\'e3
\f0 |
\f1 \'b8\'f9\'d7\'e9\'bc\'fe\'a3\'ac\'d7\'a2\'b2\'e1\'c2\'b7\'d3\'c9
\f0  
\f1 \'a3\'a8\'c2\'b7\'d3\'c9\'bf\'d8\'d6\'c6\'d2\'b3\'c3\'e6\'d7\'e9\'bc\'fe\'b5\'c4\'bc\'d3\'d4\'d8\'a3\'a9
\f0 \
		
\f1 \'d1\'a1\'cf\'ee
\f0 \
			router(
\f1 \'d1\'a1\'cf\'ee
\f0 ):router (router
\f1 \'b6\'d4\'cf\'f3
\f0 )\
\
	
\f1 \'c2\'b7\'d3\'c9\'ca\'d8\'ce\'c0
\f0 :\
		beforeRouteEnter(to,from,next)\{\}	
\f1 \'c7\'b0\'d6\'c3\'ca\'d8\'ce\'c0
\f0 ,
\f1 \'bd\'f8\'c8\'eb
\f0 \
			to 
\f1 \'c4\'bf\'b1\'ea\'c2\'b7\'d3\'c9
\f0 \
			from 
\f1 \'b5\'b1\'c7\'b0\'c2\'b7\'d3\'c9
\f0 \
			next 
\f1 \'ca\'c7\'b8\'f6\'ba\'af\'ca\'fd
\f0   next() == next(true)  
\f1 \'d4\'cb\'d0\'d0\'cc\'f8\'d7\'aa
\f0 \
						   next(false) 
\f1 \'b2\'bb\'c8\'c3\'cc\'f8\'d7\'aa
\f0   \
		beforeRouteLeave(to,from,next)\{\}  
\f1 \'ba\'f3\'d6\'c3\'ca\'d8\'ce\'c0
\f0 ,
\f1 \'c0\'eb\'bf\'aa
\f0 \
\
	
\f1 \'c2\'b7\'d3\'c9\'ca\'fd\'be\'dd\'d4\'a4\'d4\'d8
\f0 :\
		beforeRouteEnter(to,from,next)\{\
			1. 
\f1 \'b6\'b5\'bf\'e2
\f0  this.$http   axios
\f1 \'bf\'c9\'d3\'c3
\f0 \
			2. next( _this => _this.
\f1 \'ca\'f4\'d0\'d4
\f0 ="
\f1 \'c4\'c3\'b5\'bd\'b5\'c4\'ca\'fd\'be\'dd
\f0 ")\
		\}\
--------------------------------------------------------------------\
vue-cli + vue-router + axios + vue-aniamte + .....   
\f1 \'c8\'ab\'bc\'d2\'cd\'b0
\f0 \
--------------------------------------------------------------------\
	\
\
\cf2 day6:\
	
\f1 \cf3 \'d0\'c2\'ce\'c5\'bf\'cd\'bb\'a7\'b6\'cb
\f0 \
	1. 
\f1 \'bb\'b7\'be\'b3\'b4\'ee\'bd\'a8
\f0 (vue-cli +  vue-router + axios + vuex == 
\f1 \'c8\'ab\'bc\'d2\'cd\'b0
\f0 )\
\
	2. 
\f1 \'cf\'ee\'c4\'bf\'b7\'d6\'ce\'f6
\f0 (
\f1 \'d7\'e9\'bc\'fe\'b0\'b2\'c5\'c5
\f0 )\
		dist\
			|-...\
		data:\
			|-
\f1 \'ca\'fd\'be\'dd
\f0 .json\
			....\
		src\
			|-assets\
				|-js\
				|-css\
				|-image\
			|-component\
				|-	navbar.vue / footbar.vue\
				|-	home.vue / follow.vue / column.vue / user.vue / list.vue\
				|-  detail.vue / login.vue / reg.vue\
				|-	silder.vue / error.vue\
			|-filters\
				date.js\
				fillzero.js\
			|-loading\
				index.js\
				|-component\
					|-loading.vue\
			|-store\
				|-index.js\
				|-actions.js\
				|-mutations.js\
				|-getters.js\
				|-state.js\
				|-types.js\
			main.js\
			App.vue\
			router.config.js\
		package.json\
		webpack.config.js\
	3. 
\f1 \'b2\'bc\'be\'d6
\f0 \
		a) 
\f1 \'c7\'d0\'cd\'bc
\f0 (
\f1 \'d0\'e8\'d2\'aa\'c9\'e8\'bc\'c6\'b8\'e5
\f0 )\
		b) UI
\f1 \'bf\'e2
\f0 	(bootstrap/elelementUI pc
\f1 \'b6\'cb
\f0  / mintUI
\f1 \'d2\'c6\'b6\'af\'b6\'cb
\f0 )\
		c) html+css
\f1 \'c4\'a3\'b0\'e5
\f0  
\f1 \'d2\'c6\'d6\'b2
\f0  
\f1 \'b5\'bd
\f0  
\f1 \'d7\'e9\'bc\'fe
\f0 \
\
	4. 
\f1 \'c2\'b7\'d3\'c9\'b4\'ee\'bd\'a8
\f0 \
\
	5. 
\f1 \'ca\'fd\'be\'dd\'bd\'bb\'bb\'a5
\f0 +
\f1 \'c8\'ab\'be\'d6\'b9\'fd\'c2\'cb\'c6\'f7
\f0 +
\f1 \'c8\'ab\'be\'d6\'d7\'e9\'bc\'fe\'a3\'a8
\f0 loading
\f1 \'a3\'a9
\f0 \
\
	6. 
\f1 \'b7\'c7\'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed\'a3\'a8\'bf\'d8\'d6\'c6\'b5\'bc\'ba\'bd\'cf\'d4\'ca\'be
\f0 )\
		this.$root  
\f1 \'b7\'b5\'bb\'d8\'b5\'c4\'ca\'c7\'b8\'f9\'ca\'b5\'c0\'fd
\f0   new Vue (main.js)  \
		this.$root.$data.
\f1 \'b8\'f9\'ca\'fd\'be\'dd\'c3\'fb
\f0 ;\
		this.$root.$data.
\f1 \'b8\'f9\'ca\'fd\'be\'dd\'c3\'fb
\f0 =
\f1 \'d6\'b5
\f0 \
\
	
\f1 \'d7\'a2\'d2\'e2\'a3\'ba
\f0 \
		
\f1 \'d7\'ca\'d4\'b4\'d2\'fd\'c8\'eb
\f0 \
			1) 
\f1 \'d7\'a2\'c8\'eb\'ce\'c4\'bc\'fe
\f0 (index.htm) , src 
\f1 \'d2\'fd\'c8\'eb
\f0 \
			2) import 
\f1 \'b1\'e4\'c1\'bf
\f0  from '
\f1 \'d7\'ca\'d4\'b4
\f0 '  
\f1 \'c4\'a3\'bf\'e9\'bb\'af
\f0  | import '
\f1 \'d7\'ca\'d4\'b4
\f0 ' 
\f1 \'c8\'ab\'be\'d6
\f0 \
		
\f1 \'c4\'a3\'bf\'e9\'a3\'ba
\f0 \
			
\f1 \'d7\'ca\'d4\'b4\'d2\'aa\'d3\'d0\'c4\'a3\'bf\'e9\'cc\'d8\'d0\'d4
\f0 (
\f1 \'d0\'e8\'d2\'aa\'ca\'e4\'c8\'eb\'ca\'e4\'b3\'f6
\f0 ) 
\f1 \'b2\'c5\'bf\'c9\'d2\'d4
\f0 import 
\f1 \'b1\'e4\'c1\'bf
\f0  
\f1 \'a1\'a3\'a1\'a3\'a1\'a3
\f0 \
		scoped
\f1 \'a3\'ba
\f0 \
			style scoped 
\f1 \'d7\'e9\'bc\'fe\'d1\'f9\'ca\'bd\'d7\'f7\'d3\'c3\'d3\'f2\'cb\'bd\'d3\'d0\'bb\'af
\f0 \
\
\
\cf2 day7:\
\cf3 	
\f1 \'d0\'c2\'ce\'c5\'bf\'cd\'bb\'a7\'b6\'cb
\f0 \
	1. 
\f1 \'bb\'b7\'be\'b3\'b4\'ee\'bd\'a8
\f0 (vue-cli +  vue-router + axios + vuex == 
\f1 \'c8\'ab\'bc\'d2\'cd\'b0
\f0 )\
\
	2. 
\f1 \'cf\'ee\'c4\'bf\'b7\'d6\'ce\'f6
\f0 (
\f1 \'d7\'e9\'bc\'fe\'b0\'b2\'c5\'c5
\f0 )\
		dist\
			|-...\
		data:\
			|-
\f1 \'ca\'fd\'be\'dd
\f0 .json\
			....\
		src\
			|-assets\
				|-js\
				|-css\
				|-image\
			|-component\
				|-	navbar.vue / footbar.vue\
				|-	home.vue / follow.vue / column.vue / user.vue / list.vue\
				|-  detail.vue / login.vue / reg.vue\
				|-	silder.vue / error.vue\
			|-filters\
				date.js\
				fillzero.js\
			|-loading\
				index.js\
				|-component\
					|-loading.vue\
			|-store\
				|-index.js\
				|-actions.js\
				|-mutations.js\
				|-getters.js\
				|-state.js\
				|-types.js\
			main.js\
			App.vue\
			router.config.js\
		package.json\
		webpack.config.js\
	3. 
\f1 \'b2\'bc\'be\'d6
\f0 \
		a) 
\f1 \'c7\'d0\'cd\'bc
\f0 (
\f1 \'d0\'e8\'d2\'aa\'c9\'e8\'bc\'c6\'b8\'e5
\f0 )\
		b) UI
\f1 \'bf\'e2
\f0 	(bootstrap/elelementUI pc
\f1 \'b6\'cb
\f0  / mintUI
\f1 \'d2\'c6\'b6\'af\'b6\'cb
\f0 )\
		c) html+css
\f1 \'c4\'a3\'b0\'e5
\f0  
\f1 \'d2\'c6\'d6\'b2
\f0  
\f1 \'b5\'bd
\f0  
\f1 \'d7\'e9\'bc\'fe
\f0 \
\
	4. 
\f1 \'c2\'b7\'d3\'c9\'b4\'ee\'bd\'a8
\f0 \
\
	5. 
\f1 \'ca\'fd\'be\'dd\'bd\'bb\'bb\'a5
\f0 +
\f1 \'c8\'ab\'be\'d6\'b9\'fd\'c2\'cb\'c6\'f7
\f0 +
\f1 \'c8\'ab\'be\'d6\'d7\'e9\'bc\'fe\'a3\'a8
\f0 loading
\f1 \'a3\'a9
\f0 \
\
	6. 
\f1 \'b7\'c7\'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed\'a3\'a8\'bf\'d8\'d6\'c6\'b5\'bc\'ba\'bd\'cf\'d4\'ca\'be
\f0 )\
		this.$root  
\f1 \'b7\'b5\'bb\'d8\'b5\'c4\'ca\'c7\'b8\'f9\'ca\'b5\'c0\'fd
\f0   new Vue (main.js)  \
		this.$root.$data.
\f1 \'b8\'f9\'ca\'fd\'be\'dd\'c3\'fb
\f0 ;\
		this.$root.$data.
\f1 \'b8\'f9\'ca\'fd\'be\'dd\'c3\'fb
\f0 =
\f1 \'d6\'b5
\f0 \
\
	
\f1 \'d7\'a2\'d2\'e2\'a3\'ba
\f0 \
		
\f1 \'d7\'ca\'d4\'b4\'d2\'fd\'c8\'eb
\f0 \
			1) 
\f1 \'d7\'a2\'c8\'eb\'ce\'c4\'bc\'fe
\f0 (index.htm) , src 
\f1 \'d2\'fd\'c8\'eb
\f0 \
			2) import 
\f1 \'b1\'e4\'c1\'bf
\f0  from '
\f1 \'d7\'ca\'d4\'b4
\f0 '  
\f1 \'c4\'a3\'bf\'e9\'bb\'af
\f0  | import '
\f1 \'d7\'ca\'d4\'b4
\f0 ' 
\f1 \'c8\'ab\'be\'d6
\f0 \
		
\f1 \'c4\'a3\'bf\'e9\'a3\'ba
\f0 \
			
\f1 \'d7\'ca\'d4\'b4\'d2\'aa\'d3\'d0\'c4\'a3\'bf\'e9\'cc\'d8\'d0\'d4
\f0 (
\f1 \'d0\'e8\'d2\'aa\'ca\'e4\'c8\'eb\'ca\'e4\'b3\'f6
\f0 ) 
\f1 \'b2\'c5\'bf\'c9\'d2\'d4
\f0 import 
\f1 \'b1\'e4\'c1\'bf
\f0  
\f1 \'a1\'a3\'a1\'a3\'a1\'a3
\f0 \
		scoped
\f1 \'a3\'ba
\f0 \
			style scoped 
\f1 \'d7\'e9\'bc\'fe\'d1\'f9\'ca\'bd\'d7\'f7\'d3\'c3\'d3\'f2\'cb\'bd\'d3\'d0\'bb\'af
\f0 \
\
\
\
\

\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed
\f0   store\
	
\f1 \'ca\'b2\'c3\'b4\'ca\'b1\'ba\'f2\'d3\'c3\'a3\'ba
\f0  
\f1 \'b4\'f2\'cb\'e3\'bf\'aa\'b7\'a2\'d6\'d0\'b4\'f3\'d0\'cd\'d3\'a6\'d3\'c3
\f0 \
		
\f1 \'bc\'af\'d6\'d0\'ca\'bd\'ca\'fd\'be\'dd\'b9\'dc\'c0\'ed
\f0 , 
\f1 \'d2\'bb\'b4\'a6\'d0\'de\'b8\'c4\'a3\'ac\'b6\'e0\'b4\'a6\'ca\'b9\'d3\'c3
\f0 \
\
	
\f1 \'cb\'bc\'ce\'ac\'c1\'f7\'b3\'cc
\f0 :\
											store.js\
					this.$store.commit('increment')	-> mutations\
					this.$store.dispatch('jia')		-> actions			\
				     mapActions() ->actions								mapGetters()->getters\
				
\f1 \'d1\'a7\'c9\'fa
\f0 		
\f1 \'b4\'fa\'bf\'ce\'c0\'cf\'ca\'a6
\f0 		
\f1 \'d0\'a3\'b3\'a4
\f0 		 
\f1 \'b2\'c6\'ce\'f1
\f0      
\f1 \'b0\'e6\'d6\'f7\'c8\'ce
\f0 		
\f1 \'d1\'a7\'c9\'fa
\f0 \
			components - >  actions		->  mutations -> state  <- getters	<-	components\
				
\f1 \'b7\'a2\'cb\'cd\'c7\'eb\'c7\'f3
\f0       
\f1 \'b4\'a6\'c0\'ed
\f0 			
\f1 \'d0\'de\'b8\'c4\'d7\'b4\'cc\'ac
\f0 	 	\
							  
\f1 \'d2\'b5\'ce\'f1\'c2\'df\'bc\'ad
\f0 		
\f1 \'d0\'de\'b8\'c4
\f0 state			   
\f1 \'b6\'c1\'c8\'a1
\f0 state\
							  
\f1 \'d2\'ec\'b2\'bd
\f0 \
							  							state<-$store.state <-  
\f1 \'d1\'a7\'c9\'fa
\f0 \
	-----------------------------------------------------------------------------\
	
\f1 \'b0\'b2\'d7\'b0
\f0  vuex 
\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed\'b2\'e5\'bc\'fe
\f0 \
	
\f1 \'d2\'fd\'c8\'eb
\f0  + use\
\
	------------------------------------------------------------------------------\
	mapActions/mapGetters  
\f1 \'d6\'b4\'d0\'d0\'ba\'f3\'a3\'ac
\f0  
\f1 \'b7\'b5\'bb\'d8\'c0\'b4\'b5\'c4\'ca\'c7\'b6\'d4\'cf\'f3
\f0 \
		
\f1 \'b6\'d4\'cf\'f3
\f0 :	\{incremen:fn,decrement:fn,xx,xx\}\
	------------------------------------------------------------------------------\
	this.$store.commit('increment',
\f1 \'b2\'ce\'ca\'fd
\f0 /
\f1 \'b8\'ba\'d4\'d8
\f0 /payload) -> mutations\
	this.$store.dispatch('increment',
\f1 \'b2\'ce\'ca\'fd
\f0 /
\f1 \'b8\'ba\'d4\'d8
\f0 /payload)  -> actions\
\
	const actions = \{\
		increment:(\{store
\f1 \'b6\'d4\'cf\'f3
\f0 \},
\f1 \'b2\'ce\'ca\'fd
\f0 )=>\{\}\
	\}\
\
	<xx @click="
\f1 \'c7\'eb\'c7\'f3\'c0\'e0\'d0\'cd
\f0 (
\f1 \'b8\'ba\'d4\'d8
\f0 )"   actions: 
\f1 \'c7\'eb\'c7\'f3\'c0\'e0\'d0\'cd
\f0 :(\{\},payload)=>\{payload==
\f1 \'b8\'ba\'d4\'d8
\f0 \}\
	......\
\
\
\cf2 day8:\
	\cf3 vue-swipe:\
	npm i vue-swipe -D  
\f1 \'b0\'b2\'d7\'b0
\f0 \
	import './node_modules/vue-swipe/dist/vue-swipe.css'; 
\f1 \'d2\'fd\'c8\'eb\'d1\'f9\'ca\'bd
\f0 \
	import \{ Swipe, SwipeItem \} from 'vue-swipe'; 
\f1 \'d2\'fd\'c8\'eb\'d7\'e9\'bc\'fe
\f0 \
\
	Vue.component('swipe', Swipe);    
\f1 \'d7\'a2\'b2\'e1\'b0\'b2\'d7\'b0
\f0 \
	Vue.component('swipe-item', SwipeItem);\
\
	
\f1 \'d7\'a2\'b2\'e1\'b5\'bd\'d1\'a1\'cf\'ee
\f0 components 
\f1 \'cb\'bd\'d3\'d0\'ca\'b9\'d3\'c3
\f0 \
\
\

\f1 \'bd\'e2\'be\'f6\'c7\'b0\'ba\'f3\'b6\'cb\'b7\'fe\'ce\'f1\'c6\'f7\'b9\'b2\'b4\'e6
\f0 \
		
\f1 \'ba\'f3\'b6\'cb\'a3\'ba
\f0 \
			 nodejs + express + router + ejs		
\f1 \'ba\'f3\'b6\'cb\'b4\'a6\'c0\'ed\'c2\'b7\'d3\'c9\'a3\'ac\'e4\'d6\'c8\'be\'d2\'b3\'c3\'e6
\f0 \
			 html + css + js
\f1 \'d0\'a7\'b9\'fb
\f0   http://localhost:3000   public\
		
\f1 \'c7\'b0\'b6\'cb\'a3\'ba
\f0 \
			Vue-cli + vue-router + axios/resource + vuex 	
\f1 \'c7\'b0\'b6\'cb\'b4\'a6\'c0\'ed\'c2\'b7\'d3\'c9
\f0 \
				this.$http(url:
\f1 \'bd\'d3\'bf\'da
\f0 ,params:\{keyvalue\})\
			nodeJs + express \
				
\f1 \'b8\'ba\'d4\'f0
\f0 :
\f1 \'d0\'b4\'bd\'d3\'bf\'da
\f0 ,
\f1 \'b4\'a6\'c0\'ed\'ba\'f3\'b6\'cb\'b5\'bd\'bf\'e2\'a3\'ac
\f0 send
\f1 \'a3\'a8\'bf\'e2\'ca\'fd\'be\'dd
\f0 ) json() write+end()\
		
\f1 \'c7\'b0\'ba\'f3\'b6\'cb\'b7\'d6\'c0\'eb\'a3\'ba
\f0 \
			
\f1 \'bf\'e7\'d3\'f2\'a3\'ba\'d0\'e8\'d2\'aa\'ba\'f3\'cc\'a8\'d4\'ca\'d0\'ed\'b5\'c4\'a3\'ac
\f0  
\f1 \'c9\'e8\'d6\'c3\'cd\'b7
\f0 \
				a)  
\f1 \'d6\'f0\'cc\'f5\'c9\'e8\'d6\'c3
\f0   \
					res.setHeader('Access-Control-Allow-Origin', req.headers.origin)\
					
\f1 \'ce\'ca\'cc\'e2\'a3\'ba\'c3\'bf\'d2\'bb\'b8\'f6\'c2\'b7\'d3\'c9\'b6\'bc\'d2\'aa\'c9\'e8\'d6\'c3
\f0 \
				b)  
\f1 \'cd\'b3\'d2\'bb\'c9\'e8\'d6\'c3
\f0 (
\f1 \'d6\'d0\'bc\'e4\'bc\'fe
\f0 cors)\
					app.use(cors(\{\
					  "origin": ['http://localhost:8080','',''],\
					  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",\
					  allowedHeaders:['Content-Type', 'Authorization'],\
					  withCredentials:true\
					\}));\

\f1 \'bf\'e7\'d4\'b4\'c6\'be\'d6\'a4
\f0 \
		ajax
\f1 \'bf\'e7\'d4\'b4\'c7\'eb\'c7\'f3\'ca\'fd\'be\'dd\'a3\'ac\'c4\'ac\'c8\'cf\'b2\'bb\'cc\'e1\'b9\'a9\'c6\'be\'be\'dd
\f0 (cookie,http
\f1 \'c8\'cf\'d6\'a4\'a3\'ac\'bf\'cd\'bb\'a7\'b6\'cb
\f0 SSL
\f1 \'d6\'a4\'c3\'f7
\f0 )\
		\
		
\f1 \'c1\'f7\'b3\'cc\'a3\'ba
\f0 \
			vue->
\f1 \'d3\'c3\'bb\'a7\'d6\'d0\'d0\'c4
\f0 ->vue
\f1 \'b7\'a2\'cb\'cd\'c7\'eb\'c7\'f3
\f0 ->nodejs
\f1 \'cf\'ec\'d3\'a6\'c5\'d0\'b6\'cf\'ce\'de
\f0 session,
\f1 \'b7\'b5\'bb\'d8\'b8\'f8
\f0 vue->vue
\f1 \'c2\'b7\'d3\'c9\'c7\'d0\'bb\'bb\'b5\'bd\'b5\'c7\'c2\'bc\'d2\'b3\'c3\'e6
\f0 ->vue
\f1 \'b7\'a2\'cb\'cd\'b5\'c7\'c2\'bc\'c7\'eb\'c7\'f3
\f0 ->nodejs
\f1 \'cf\'ec\'d3\'a6\'a3\'ac\'b6\'b5\'bf\'e2\'a3\'ac\'d6\'d6
\f0 cookie(
\f1 \'d0\'e8\'d2\'aa\'c6\'be\'d6\'a4
\f0 )
\f1 \'a3\'ac\'b7\'b5\'bb\'d8\'d3\'c3\'bb\'a7\'ca\'fd\'be\'dd
\f0 ->vue 
\f1 \'c2\'b7\'d3\'c9\'cc\'f8\'d7\'aa\'a3\'ac\'b4\'ab\'b5\'dd\'bd\'d3\'ca\'dc\'b5\'bd\'b5\'c4\'ca\'fd\'be\'dd\'b8\'f8
\f0  "
\f1 \'d3\'c3\'bb\'a7\'d6\'d0\'d0\'c4\'d7\'e9\'bc\'fe
\f0 "\
\
			
\f1 \'c7\'d0\'bb\'bb\'b5\'bd\'c6\'e4\'cb\'fb\'c2\'b7\'d3\'c9\'a3\'ac\'d4\'d9\'c7\'d0\'bb\'d8\'c0\'b4\'a3\'a8\'d3\'c3\'bb\'a7\'d6\'d0\'d0\'c4
\f0 )->vue
\f1 \'b7\'a2\'cb\'cd\'c7\'eb\'c7\'f3
\f0 ->nodejs
\f1 \'cf\'ec\'d3\'a6\'c5\'d0\'b6\'cf\'d3\'d0
\f0 session,
\f1 \'b7\'b5\'bb\'d8
\f0 vue
\f1 \'b5\'c4\'ca\'c7
\f0  
\f1 \'d2\'d1\'b5\'c7\'c2\'bc
\f0 |
\f1 \'b6\'b5\'bf\'e2\'c4\'c3\'d3\'c3\'bb\'a7\'ca\'fd\'be\'dd
\f0 \
\
		
\f1 \'ca\'b9\'d3\'c3\'d0\'af\'b4\'f8\'bf\'e7\'d4\'b4\'c6\'be\'be\'dd
\f0 |
\f1 \'b7\'b4\'cf\'f2\'bf\'e7\'d3\'f2
\f0 \
			
\f1 \'c7\'b0\'b6\'cb
\f0 : 
\f1 \'d0\'af\'b4\'f8
\f0 \
				a)	
\f1 \'d6\'f0\'cc\'f5\'d4\'ca\'d0\'ed
\f0  axios(\{\})\
					withCredentials: true,//
\f1 \'d0\'af\'b4\'f8\'bf\'e7\'d4\'b4\'c6\'be\'d6\'a4
\f0 \
				b) axios.defaults.withCredentials=true \
			
\f1 \'ba\'f3\'b6\'cb\'a3\'ba\'d4\'ca\'d0\'ed\'d0\'af\'b4\'f8
\f0 \
				a) 
\f1 \'d6\'f0\'cc\'f5\'d4\'ca\'d0\'ed
\f0 \
					res.setHeader('Access-Control-Allow-Credentials', true);\
				b) 
\f1 \'d6\'d0\'bc\'e4\'bc\'fe\'cd\'b3\'d2\'bb\'c5\'e4\'d6\'c3
\f0 (cors)\
\
		
\f1 \'c7\'b0\'b6\'cb\'d4\'ad\'c9\'fa\'a3\'ba
\f0 \
			var xhr = new XMLHttpRequest(); \
			xhr.open("post", "xxx/xxx", true);\
			xhr.withCredentials = true;		
\f1 \'c7\'eb\'c7\'f3\'cd\'b7\'c0\'ef\'c3\'e6\'b4\'f8\'c6\'be\'d6\'a4\'a3\'ac\'b4\'f8
\f0 cookie\
			xhr.onload = function()\{\}\
			xhr.send("a=1&b=2");\
\
			
\f1 \'c7\'b0\'b6\'cb
\f0 jqAjax:	
\f1 \'c7\'eb\'c7\'f3\'cd\'b7\'c0\'ef\'c3\'e6\'b4\'f8\'c6\'be\'d6\'a4\'a3\'ac\'b4\'f8
\f0 cookie\
				$.ajax(\{\
					type:'get',\
					url:"http://localhost:3000/logouts",\
					dataType:"json",\
					xhrFields: \{\
						withCredentials: true  
\f1 \'c7\'eb\'c7\'f3\'cd\'b7\'c0\'ef\'c3\'e6\'b4\'f8\'c6\'be\'d6\'a4\'a3\'ac\'b4\'f8
\f0 cookie\
					\},\
					success:function(data)\{\
						console.log(data);\
					\}\
				\})\
				
\f1 \'c7\'b0\'b6\'cb
\f0 :vue-resource\
					this.$http.get(url,\{credentials:true\}) 
\f1 \'d7\'b7\'cc\'f5
\f0 \
\
					Vue.http.interceptors.push(function(request, next) \{\
					  request.credentials = true  
\f1 \'cd\'b3\'d2\'bb
\f0 \
					  next();\
					\});		\
\
\

\fs32 \cf2 React:\

\fs24 day1:\
	\cf3 ----------------------react----------------------\

\f1 \'b8\'c9\'c2\'ef\'b5\'c4\'a3\'ba\'c7\'b0\'b6\'cb\'bf\'f2\'bc\'dc\'a3\'ac\'b0\'d1\'d3\'c3\'bb\'a7\'bd\'e7\'c3\'e6\'b3\'e9\'cf\'f3\'b3\'c9\'d2\'bb\'b8\'f6\'b8\'f6\'b5\'c4\'d7\'e9\'bc\'fe\'a3\'ac\'b0\'b4\'d0\'e8\'d7\'e9\'ba\'cf\'b3\'c9\'d2\'b3\'c3\'e6
\f0 \

\f1 \'b9\'d9\'cd\'f8\'a3\'ba
\f0 https://reactjs.org/\
	  http://www.react-cn.com/\
	  http://www.css88.com/react/\

\f1 \'b2\'bb\'cd\'ac\'b5\'e3\'a3\'ba
\f0 \
		angularJs 	vue 	react  					angular  ts\

\f1 \'bf\'d8\'d6\'c6\'c6\'f7
\f0 	\uc0\u8730 			-		-						\u8730 \

\f1 \'b9\'fd\'c2\'cb\'c6\'f7
\f0 	\uc0\u8730 			\u8730 		-						v\

\f1 \'d6\'b8\'c1\'ee
\f0 	\uc0\u8730 			\u8730 		-	
\f1 \'a3\'a8\'b1\'e0\'d0\'b4\'b1\'ed\'b4\'ef\'ca\'bd\'a3\'a9
\f0 		\uc0\u8730 \

\f1 \'d7\'e9\'bc\'fe
\f0     			\uc0\u8730 		\u8730 						\u8730 \
\

\f1 \'b9\'b2\'cd\'ac\'b5\'e3\'a3\'ba
\f0 \
	
\f1 \'d0\'e9\'c4\'e2
\f0 DOM(angularJs
\f1 \'b3\'fd\'cd\'e2
\f0   angular
\f1 \'d3\'d0
\f0 )
\f1 \'a3\'ac\'ca\'fd\'be\'dd\'c7\'fd\'b6\'af
\f0 \
\
JSX
\f1 \'a3\'ba
\f0 js + html		
\f1 \'c0\'e0
\f0 XML
\f1 \'d3\'ef\'b7\'a8
\f0 \
	oo.js/  oo.jsx  
\f1 \'ba\'cf\'b7\'a8\'b5\'c4
\f0 \
\

\f1 \'d3\'ef\'b7\'a8\'d2\'aa\'c7\'f3\'a3\'ba
\f0 \
	
\f1 \'b1\'ea\'c7\'a9\'d2\'aa\'b1\'d5\'ba\'cf
\f0 \
	
\f1 \'d4\'aa\'cb\'d8\'b1\'d8\'d0\'eb\'d2\'aa\'d3\'d0\'d2\'bb\'b8\'f6\'b6\'a5\'b2\'e3\'d4\'aa\'cb\'d8
\f0 \
	
\f1 \'b1\'e4\'c1\'bf\'ca\'d7\'d7\'d6\'c4\'b8\'b4\'f3\'d0\'b4\'b4\'fa\'b1\'ed\'d7\'e9\'bc\'fe\'a3\'ac\'d0\'a1\'d0\'b4\'b6\'d4\'d3\'a6\'ca\'c7
\f0 DOM|jsx
\f1 \'d4\'aa\'cb\'d8
\f0 \
\

\f1 \'be\'ab\'cb\'e8\'a3\'ba\'b6\'e0\'d7\'e9\'bc\'fe\'d7\'e9\'ba\'cf\'a3\'ac
\f0 jsx+
\f1 \'ba\'af\'ca\'fd\'ca\'bd\'b1\'e0\'b3\'cc\'a3\'a8\'d4\'cb\'cb\'e3\'d0\'b4\'b3\'c9\'d2\'bb\'cf\'b5\'c1\'d0\'b5\'c4\'ba\'af\'ca\'fd\'c7\'b6\'cc\'d7\'a3\'a9
\f0 \
\

\f1 \'cb\'bc\'cf\'eb
\f0 :\
	
\f1 \'d7\'e9\'bc\'fe\'b2\'f0\'b7\'d6\'c4\'bf\'b1\'ea
\f0 :
\f1 \'ce\'aa\'c1\'cb\'b8\'b4\'d3\'c3
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c8\'e7\'ba\'ce\'b2\'f0\'a3\'ba\'b5\'a5\'d2\'bb\'d4\'ad\'d4\'f2
\f0 \
	
\f1 \'d7\'b4\'cc\'ac\'d3\'a6\'b8\'c3\'b8\'f8\'cb\'ad
\f0 : 
\f1 \'be\'a1\'c1\'bf\'b8\'f8\'b6\'a5\'b2\'e3\'d7\'e9\'bc\'fe
\f0 ,->props->
\f1 \'d7\'d3\'d7\'e9\'bc\'fe
\f0 \
	props
\f1 \'c8\'a1\'c3\'fb\'a3\'ba\'b4\'d3\'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed\'b5\'c4\'bd\'c7\'b6\'c8\'c0\'b4\'c3\'fc\'c3\'fb
\f0 , 
\f1 \'b6\'f8\'b2\'bb\'ca\'c7\'cb\'fc\'b1\'bb\'ca\'b9\'d3\'c3\'b5\'c4\'c9\'cf\'cf\'c2\'ce\'c4\'bb\'b7\'be\'b3
\f0 \
	
\f1 \'b4\'bf\'ba\'af\'ca\'fd
\f0 :
\f1 \'b2\'bb\'bb\'e1\'ca\'d4\'cd\'bc\'b8\'c4\'b1\'e4\'cb\'fc\'c3\'c7\'b5\'c4\'ca\'e4\'c8\'eb\'a3\'ac\'b2\'a2\'c7\'d2\'b6\'d4\'d3\'da\'cd\'ac\'d1\'f9\'b5\'c4\'ca\'e4\'c8\'eb
\f0 ,
\f1 \'ca\'bc\'d6\'d5\'bf\'c9\'d2\'d4\'b5\'c3\'b5\'bd\'cf\'e0\'cd\'ac\'b5\'c4\'bd\'e1\'b9\'fb
\f0 ,React 
\f1 \'d7\'e9\'bc\'fe\'b6\'bc\'b1\'d8\'d0\'eb\'ca\'c7\'b4\'bf\'ba\'af\'ca\'fd\'a3\'ac\'b2\'a2\'bd\'fb\'d6\'b9\'d0\'de\'b8\'c4\'c6\'e4\'d7\'d4\'c9\'ed
\f0  props\
	setState: 
\f1 \'ca\'c7\'d2\'ec\'b2\'bd\'b5\'c4
\f0 ,
\f1 \'cb\'f9\'d2\'d4\'b2\'bb\'c4\'dc\'d2\'c0\'c0\'b5\'c9\'cf\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'d6\'b5\'a3\'ac\'d7\'f7\'ce\'aa\'cf\'c2\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'b2\'ce\'ca\'fd
\f0 \
		
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 this.setState(function(prevState,props)\{\})\
			  
\f1 \'ba\'af\'ca\'fd\'bd\'d3\'ca\'d5\'c7\'b0\'d2\'bb\'b8\'f6\'d7\'b4\'cc\'ac\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  1 
\f1 \'b8\'f6\'b2\'ce\'ca\'fd\'a3\'ac
\f0  
\f1 \'b2\'a2\'bd\'ab\'b8\'fc\'d0\'c2\'ba\'f3\'b5\'c4\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  2
\f1 \'b8\'f6\'b2\'ce\'ca\'fd
\f0 \
		      \
		      
\f1 \'b8\'fc\'d0\'c2\'bb\'e1\'b1\'bb\'ba\'cf\'b2\'a2
\f0 ,
\f1 \'ca\'c7\'c7\'b3\'ba\'cf\'b2\'a2
\f0 \
\

\f1 \'bb\'b7\'be\'b3\'b4\'ee\'bd\'a8\'a3\'ba
\f0 \
	a)	webpack + webpack-dev-server\
		/ 
\f1 \'d6\'b8\'cf\'f2
\f0  index
\f1 \'cb\'f9\'d4\'da\'ce\'bb\'d6\'c3\'a3\'ac\'cd\'bc\'c6\'ac
\f0 ,
\f1 \'ca\'fd\'be\'dd
\f0  
\f1 \'b6\'bc\'d6\'b8\'cf\'f2
\f0  / \
		js / css / jsx 
\f1 \'cf\'e0\'b6\'d4\'b6\'a8\'ce\'bb
\f0 \
	b) npm install create-react-app	-g   
\f1 \'b9\'d9\'b7\'bd\'bd\'c5\'ca\'d6\'bc\'dc
\f0 \
		create-react-app 
\f1 \'c4\'bf\'c2\'bc\'c3\'fb
\f0 | .\
		npm start 
\f1 \'bf\'aa\'b7\'a2\'c4\'a3\'ca\'bd
\f0 \
		npm build 
\f1 \'b4\'f2\'b0\'fc
\f0 \
\
		
\f1 \'b8\'fc\'b8\'c4\'c4\'ac\'c8\'cf\'b5\'c4\'b6\'cb\'bf\'da\'ba\'c5
\f0 :\
		1.	node_modules\\react-scripts\\scripts\
		const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;\
\
		2.	npm run eject\
		 
\f1 \'d0\'de\'b8\'c4
\f0 script/start.js\
\
\
		
\f1 \'b1\'be\'b5\'d8\'d7\'ca\'d4\'b4\'b5\'bc\'c8\'eb
\f0 (import) 
\f1 \'b2\'bb\'bf\'c9\'d2\'d4\'b5\'bc\'c8\'eb
\f0 src
\f1 \'d6\'ae\'cd\'e2\'b5\'c4\'b0\'fc
\f0 \
\
		
\f1 \'ce\'ca\'cc\'e2
\f0 :jsx
\f1 \'c7\'b0\'be\'b0\'cd\'bc\'c6\'ac
\f0 , ./ 
\f1 \'ba\'cd
\f0  / 
\f1 \'b6\'bc\'d6\'b8\'cf\'f2\'c1\'cb
\f0  public
\f1 \'c4\'bf\'c2\'bc
\f0 \
		
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 1.
\f1 \'c4\'a3\'bf\'e9\'bb\'af\'b5\'bc\'c8\'eb
\f0  src
\f1 \'c4\'bf\'c2\'bc\'c0\'ef
\f0  
\f1 \'d2\'aa\'d4\'da
\f0 jsx
\f1 \'c0\'ef
\f0 src
\f1 \'b5\'c4\'cd\'bc\'c6\'ac
\f0 \
			  2.
\f1 \'cf\'e0\'b6\'d4\'bb\'f2\'d5\'df\'be\'f8\'b6\'d4\'b5\'bc\'c8\'eb
\f0 public
\f1 \'c4\'bf\'c2\'bc\'cf\'c2\'b5\'c4\'cd\'bc\'c6\'ac
\f0 \
		public
\f1 \'c4\'bf\'c2\'bc\'c0\'ef\'c3\'e6\'b5\'c4\'d7\'ca\'d4\'b4\'bb\'e1\'d6\'b1\'bd\'d3
\f0 copy
\f1 \'b5\'bd
\f0 build
\f1 \'c4\'bf\'c2\'bc\'a3\'ac
\f0 src
\f1 \'c0\'ef\'c3\'e6\'b5\'c4\'d7\'ca\'d4\'b4\'bb\'e1\'b4\'f2\'b0\'fc\'c4\'a3\'bf\'e9\'bb\'af
\f0 \
\
\
		
\f1 \'c8\'a5\'b3\'fd
\f0 eslint 
\f1 \'be\'af\'b8\'e6\'a3\'ba
\f0 \
			npm run eject\
			
\f1 \'d5\'d2\'b5\'bd\'cf\'ee\'c4\'bf\'cf\'c2
\f0 config/webpack.config.dev|prod\
			
\f1 \'d7\'a2\'ca\'cd\'b9\'d8\'d3\'da
\f0 eslint
\f1 \'b5\'c4\'b5\'bc\'c8\'eb\'ba\'cd
\f0 rules
\f1 \'b9\'e6\'d4\'f2
\f0 \
\
		
\f1 \'b4\'f2\'b0\'fc
\f0  + 
\f1 \'d4\'a4\'c0\'c0\'a3\'ba
\f0 \
			npm build\
			serve -s build --port 
\f1 \'b6\'cb\'bf\'da
\f0  --open \
			serve 
\f1 \'b7\'fe\'ce\'f1\'c6\'f7\'c3\'fc\'c1\'ee\'d0\'d0\'b9\'a4\'be\'df\'a3\'a8
\f0 npm i serve -g)\
\
			\
\
		help: https://github.com/facebook/create-react-app\
\
		
\f1 \'bd\'e2\'be\'f6\'b7\'bd\'b0\'b8
\f0 :\
			
\f1 \'cf\'ee\'c4\'bf\'d7\'ca\'d4\'b4\'a3\'ac\'be\'a1\'c1\'bf\'b4\'d3
\f0 src
\f1 \'c4\'bf\'c2\'bc\'cf\'c2\'d2\'fd\'c8\'eb\'a3\'ac\'b4\'f2\'b0\'fc\'ca\'b1\'bb\'e1\'c4\'a3\'bf\'e9\'bb\'af
\f0 \
			
\f1 \'cd\'bc\'c6\'ac\'d7\'ca\'d4\'b4\'c4\'a3\'bf\'e9\'bb\'af\'d2\'fd\'c8\'eb\'a3\'ac\'c8\'e7\'ba\'ce\'c0\'b4\'d7\'d4\'bf\'e2\'d6\'bb\'c4\'dc\'b7\'c5\'b5\'bd
\f0 public
\f1 \'c4\'bf\'c2\'bc\'cf\'c2
\f0 \
			\
	c) yeomen 
\f1 \'c4\'bf\'c2\'bc
\f0 		
\f1 \'d0\'e8\'d2\'aa\'b0\'b2\'d7\'b0
\f0 \
	npm install\
	npm run dev\
\
------------------------------------------\
\
ES6 
\f1 \'b4\'b4\'bd\'a8\'d7\'e9\'bc\'fe\'a3\'ba
\f0 	\
	import React from 'react';\
	class 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 |
\f1 \'c0\'e0
\f0  extends React.Component\{\
		
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0 ; //es7\
		state=\{\}  
\f1 \'d7\'b4\'cc\'ac
\f0 \
		constrctor(props)\{ //
\f1 \'d7\'e9\'bc\'fe\'d3\'d0\'d7\'b4\'cc\'ac
\f0  constrctor
\f1 \'be\'cd\'b3\'f6\'cf\'d6
\f0 \
			super(props) //
\f1 \'c0\'e0\'c8\'e7\'b9\'fb\'d3\'d0\'bc\'cc\'b3\'d0
\f0  super
\f1 \'be\'cd\'d2\'aa\'b3\'f6\'cf\'d6
\f0 \
				
\f1 \'d0\'e8\'d2\'aa\'d4\'da\'d7\'e9\'bc\'fe\'b9\'b9\'d4\'ec\'c6\'f7\'c4\'da\'b4\'a6\'c0\'ed\'b4\'ab\'b5\'dd\'b9\'fd\'c0\'b4\'b5\'c4
\f0 props
\f1 \'ca\'b1\'a3\'ac
\f0 props
\f1 \'b2\'ce\'ca\'fd\'be\'cd\'b3\'f6\'cf\'d6
\f0 \
			this.
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0   // es6\
			this.state=\{\}  
\f1 \'d7\'b4\'cc\'ac
\f0 \
		\}\
		render()\{  //
\f1 \'d7\'e9\'bc\'fe\'e4\'d6\'c8\'be\'ba\'af\'ca\'fd\'a3\'ac\'d2\'bb\'b6\'a8\'d2\'aa
\f0 return 
\f1 \'b7\'b5\'bb\'d8
\f0 jsx\
			return html|jsx\
		\}\
		
\f1 \'b7\'bd\'b7\'a8
\f0 1()\{\} 
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'b5\'c4\'b7\'bd\'b7\'a8
\f0 \
		
\f1 \'b7\'bd\'b7\'a8
\f0 2()\{\}\
	\}\
	
\f1 \'c0\'e0\'c3\'fb
\f0 .
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0     
\f1 \'be\'b2\'cc\'ac\'ca\'f4\'d0\'d4
\f0 |
\f1 \'c0\'e0\'ca\'f4\'d0\'d4
\f0 \
	
\f1 \'c0\'e0\'c3\'fb
\f0 .
\f1 \'b7\'bd\'b7\'a8
\f0 =fn    
\f1 \'be\'b2\'cc\'ac\'b7\'bd\'b7\'a8
\f0  | 
\f1 \'c0\'e0\'b7\'bd\'b7\'a8
\f0 \
\
ES5 
\f1 \'b4\'b4\'bd\'a8\'d7\'e9\'bc\'fe\'a3\'ba
\f0 	\
	var React = require('react');\
	let 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0  = React.createClass(\{\
	  getInitialState:function()\{  //
\f1 \'d7\'e9\'bc\'fe\'d7\'b4\'cc\'ac
\f0 \
	  	return \{\
	  		
\f1 \'ca\'fd\'be\'dd
\f0 :
\f1 \'d6\'b5
\f0 \
	  	\}\
	  \}\
	  render:function()\{\
	    return html|jsx\
	  \}\
	\});\

\f1 \'ca\'b9\'d3\'c3\'d7\'e9\'bc\'fe\'a3\'ba
\f0 \
	<HelloWorld/> \uc0\u8730 \
	<HelloWorld></HelloWorld>\
\

\f1 \'e4\'d6\'c8\'be\'a3\'a8\'c3\'e8\'bb\'ad\'a3\'a9\'d2\'b3\'c3\'e6
\f0 \
	import ReactDom from 'react-dom';\
	var RactDom = require('react-dom');\
\
	ReactDom.render(
\f1 \'d7\'e9\'bc\'fe
\f0 /dom,
\f1 \'b2\'e5\'c8\'eb\'b5\'e3
\f0  #app)\
\
----------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'ca\'f4\'d0\'d4
\f0 (props)
\f1 \'a3\'ba
\f0 \
	
\f1 \'b5\'f7\'d3\'c3\'d7\'e9\'bc\'fe\'a3\'ba
\f0 <
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0  
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 =
\f1 \'d6\'b5
\f0  
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 2=
\f1 \'d6\'b5
\f0 2 .. />	
\f1 \'b4\'ab\'b5\'dd\'ca\'f4\'d0\'d4
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf
\f0 : \{this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 \}   jsx
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0   
\f1 \'ca\'b9\'d3\'c3\'ca\'f4\'d0\'d4
\f0 \
			  this 
\f1 \'b4\'fa\'b1\'ed\'b5\'c4\'ca\'c7\'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed
\f0   \
\
	
\f1 \'d6\'b5\'c0\'e0\'d0\'cd\'a3\'ba\'d7\'d6\'b7\'fb
\f0 ||\{
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0 \}\
	this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 ==array 
\f1 \'d0\'e8\'d2\'aa\'d1\'ad\'bb\'b7
\f0 \
	arr
\f1 \'d6\'b5\'a3\'ba
\f0 this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 .map(function()\{\
		return html\
	\})\
	json \{json\} 
\f1 \'b1\'a8\'b4\'ed\'a3\'ac
\f0  
\f1 \'b6\'d4\'cf\'f3\'ce\'de\'b7\'a8\'d6\'b1\'bd\'d3\'cd\'a8\'b9\'fd
\f0 \{obj\}
\f1 \'d5\'b9\'ca\'be
\f0 ->\{obj.key\}\
\
----------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'d6\'ae\'bc\'e4\'ca\'fd\'be\'dd\'b4\'ab\'b5\'dd
\f0 (props
\f1 \'b4\'ab\'b5\'dd
\f0 )\
	
\f1 \'b8\'b8\'b5\'bd\'d7\'d3
\f0 	props 
\f1 \'b4\'ab\'b5\'dd
\f0  <Child 
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'ca\'fd\'be\'dd
\f0 />\
	
\f1 \'d7\'d3\'b5\'bd\'b8\'b8
\f0      props 
\f1 \'b4\'ab\'b5\'dd
\f0  <Child 
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'b8\'b8\'b7\'bd\'b7\'a8
\f0 />\
			\{this.props.
\f1 \'ca\'f4\'d0\'d4
\f0 .bind(this,xx)\}\
\
\cf2 day2:\
\cf3 ----------------------react----------------------\

\f1 \'b8\'c9\'c2\'ef\'b5\'c4\'a3\'ba\'c7\'b0\'b6\'cb\'bf\'f2\'bc\'dc\'a3\'ac\'b0\'d1\'d3\'c3\'bb\'a7\'bd\'e7\'c3\'e6\'b3\'e9\'cf\'f3\'b3\'c9\'d2\'bb\'b8\'f6\'b8\'f6\'b5\'c4\'d7\'e9\'bc\'fe\'a3\'ac\'b0\'b4\'d0\'e8\'d7\'e9\'ba\'cf\'b3\'c9\'d2\'b3\'c3\'e6
\f0 \

\f1 \'b9\'d9\'cd\'f8\'a3\'ba
\f0 https://reactjs.org/\
	  http://www.react-cn.com/\
	  http://www.css88.com/react/\

\f1 \'b2\'bb\'cd\'ac\'b5\'e3\'a3\'ba
\f0 \
		angularJs 	vue 	react  					angular  ts\

\f1 \'bf\'d8\'d6\'c6\'c6\'f7
\f0 	\uc0\u8730 			-		-						\u8730 \

\f1 \'b9\'fd\'c2\'cb\'c6\'f7
\f0 	\uc0\u8730 			\u8730 		-						v\

\f1 \'d6\'b8\'c1\'ee
\f0 	\uc0\u8730 			\u8730 		-	
\f1 \'a3\'a8\'b1\'e0\'d0\'b4\'b1\'ed\'b4\'ef\'ca\'bd\'a3\'a9
\f0 		\uc0\u8730 \

\f1 \'d7\'e9\'bc\'fe
\f0     			\uc0\u8730 		\u8730 						\u8730 \
\

\f1 \'b9\'b2\'cd\'ac\'b5\'e3\'a3\'ba
\f0 \
	
\f1 \'d0\'e9\'c4\'e2
\f0 DOM(angularJs
\f1 \'b3\'fd\'cd\'e2
\f0   angular
\f1 \'d3\'d0
\f0 )
\f1 \'a3\'ac\'ca\'fd\'be\'dd\'c7\'fd\'b6\'af
\f0 \
\
JSX
\f1 \'a3\'ba
\f0 js + html		
\f1 \'c0\'e0
\f0 XML
\f1 \'d3\'ef\'b7\'a8
\f0 \
	oo.js/  oo.jsx  
\f1 \'ba\'cf\'b7\'a8\'b5\'c4
\f0 \
\

\f1 \'d3\'ef\'b7\'a8\'d2\'aa\'c7\'f3\'a3\'ba
\f0 \
	
\f1 \'b1\'ea\'c7\'a9\'d2\'aa\'b1\'d5\'ba\'cf
\f0 \
	
\f1 \'d4\'aa\'cb\'d8\'b1\'d8\'d0\'eb\'d2\'aa\'d3\'d0\'d2\'bb\'b8\'f6\'b6\'a5\'b2\'e3\'d4\'aa\'cb\'d8
\f0 \
	
\f1 \'b1\'e4\'c1\'bf\'ca\'d7\'d7\'d6\'c4\'b8\'b4\'f3\'d0\'b4\'b4\'fa\'b1\'ed\'d7\'e9\'bc\'fe\'a3\'ac\'d0\'a1\'d0\'b4\'b6\'d4\'d3\'a6\'ca\'c7
\f0 DOM|jsx
\f1 \'d4\'aa\'cb\'d8
\f0 \
\

\f1 \'be\'ab\'cb\'e8\'a3\'ba\'b6\'e0\'d7\'e9\'bc\'fe\'d7\'e9\'ba\'cf\'a3\'ac
\f0 jsx+
\f1 \'ba\'af\'ca\'fd\'ca\'bd\'b1\'e0\'b3\'cc\'a3\'a8\'d4\'cb\'cb\'e3\'d0\'b4\'b3\'c9\'d2\'bb\'cf\'b5\'c1\'d0\'b5\'c4\'ba\'af\'ca\'fd\'c7\'b6\'cc\'d7\'a3\'a9
\f0 \
\

\f1 \'cb\'bc\'cf\'eb
\f0 :\
	
\f1 \'d7\'e9\'bc\'fe\'b2\'f0\'b7\'d6\'c4\'bf\'b1\'ea
\f0 :
\f1 \'ce\'aa\'c1\'cb\'b8\'b4\'d3\'c3
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c8\'e7\'ba\'ce\'b2\'f0\'a3\'ba\'b5\'a5\'d2\'bb\'d4\'ad\'d4\'f2
\f0 \
	
\f1 \'d7\'b4\'cc\'ac\'d3\'a6\'b8\'c3\'b8\'f8\'cb\'ad
\f0 : 
\f1 \'be\'a1\'c1\'bf\'b8\'f8\'b6\'a5\'b2\'e3\'d7\'e9\'bc\'fe
\f0 ,->props->
\f1 \'d7\'d3\'d7\'e9\'bc\'fe
\f0 \
	props
\f1 \'c8\'a1\'c3\'fb\'a3\'ba\'b4\'d3\'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed\'b5\'c4\'bd\'c7\'b6\'c8\'c0\'b4\'c3\'fc\'c3\'fb
\f0 , 
\f1 \'b6\'f8\'b2\'bb\'ca\'c7\'cb\'fc\'b1\'bb\'ca\'b9\'d3\'c3\'b5\'c4\'c9\'cf\'cf\'c2\'ce\'c4\'bb\'b7\'be\'b3
\f0 \
	
\f1 \'b4\'bf\'ba\'af\'ca\'fd
\f0 :
\f1 \'b2\'bb\'bb\'e1\'ca\'d4\'cd\'bc\'b8\'c4\'b1\'e4\'cb\'fc\'c3\'c7\'b5\'c4\'ca\'e4\'c8\'eb\'a3\'ac\'b2\'a2\'c7\'d2\'b6\'d4\'d3\'da\'cd\'ac\'d1\'f9\'b5\'c4\'ca\'e4\'c8\'eb
\f0 ,
\f1 \'ca\'bc\'d6\'d5\'bf\'c9\'d2\'d4\'b5\'c3\'b5\'bd\'cf\'e0\'cd\'ac\'b5\'c4\'bd\'e1\'b9\'fb
\f0 ,React 
\f1 \'d7\'e9\'bc\'fe\'b6\'bc\'b1\'d8\'d0\'eb\'ca\'c7\'b4\'bf\'ba\'af\'ca\'fd\'a3\'ac\'b2\'a2\'bd\'fb\'d6\'b9\'d0\'de\'b8\'c4\'c6\'e4\'d7\'d4\'c9\'ed
\f0  props\
	setState: 
\f1 \'ca\'c7\'d2\'ec\'b2\'bd\'b5\'c4
\f0 ,
\f1 \'cb\'f9\'d2\'d4\'b2\'bb\'c4\'dc\'d2\'c0\'c0\'b5\'c9\'cf\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'d6\'b5\'a3\'ac\'d7\'f7\'ce\'aa\'cf\'c2\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'b2\'ce\'ca\'fd
\f0 \
		
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 this.setState(function(prevState,props)\{\})\
			  
\f1 \'ba\'af\'ca\'fd\'bd\'d3\'ca\'d5\'c7\'b0\'d2\'bb\'b8\'f6\'d7\'b4\'cc\'ac\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  1 
\f1 \'b8\'f6\'b2\'ce\'ca\'fd\'a3\'ac
\f0  
\f1 \'b2\'a2\'bd\'ab\'b8\'fc\'d0\'c2\'ba\'f3\'b5\'c4\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  2
\f1 \'b8\'f6\'b2\'ce\'ca\'fd
\f0 \
		      \
		      
\f1 \'b8\'fc\'d0\'c2\'bb\'e1\'b1\'bb\'ba\'cf\'b2\'a2
\f0 ,
\f1 \'ca\'c7\'c7\'b3\'ba\'cf\'b2\'a2
\f0 \
\

\f1 \'bb\'b7\'be\'b3\'b4\'ee\'bd\'a8\'a3\'ba
\f0 \
	a)	webpack + webpack-dev-server\
		/ 
\f1 \'d6\'b8\'cf\'f2
\f0  index
\f1 \'cb\'f9\'d4\'da\'ce\'bb\'d6\'c3\'a3\'ac\'cd\'bc\'c6\'ac
\f0 ,
\f1 \'ca\'fd\'be\'dd
\f0  
\f1 \'b6\'bc\'d6\'b8\'cf\'f2
\f0  / \
		js / css / jsx 
\f1 \'cf\'e0\'b6\'d4\'b6\'a8\'ce\'bb
\f0 \
\
		css
\f1 \'c4\'a3\'bf\'e9\'bb\'af\'b4\'a6\'c0\'ed
\f0 : \
	b) npm install create-react-app	-g   
\f1 \'b9\'d9\'b7\'bd\'bd\'c5\'ca\'d6\'bc\'dc
\f0 \
		create-react-app 
\f1 \'c4\'bf\'c2\'bc\'c3\'fb
\f0 | .\
		npm start 
\f1 \'bf\'aa\'b7\'a2\'c4\'a3\'ca\'bd
\f0 \
		npm build 
\f1 \'b4\'f2\'b0\'fc
\f0 \
\
		
\f1 \'b8\'fc\'b8\'c4\'c4\'ac\'c8\'cf\'b5\'c4\'b6\'cb\'bf\'da\'ba\'c5
\f0 :\
		1.	node_modules\\react-scripts\\scripts\
		const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;\
\
		2.	npm run eject\
		 
\f1 \'d0\'de\'b8\'c4
\f0 script/start.js\
\
\
		
\f1 \'b1\'be\'b5\'d8\'d7\'ca\'d4\'b4\'b5\'bc\'c8\'eb
\f0 (import) 
\f1 \'b2\'bb\'bf\'c9\'d2\'d4\'b5\'bc\'c8\'eb
\f0 src
\f1 \'d6\'ae\'cd\'e2\'b5\'c4\'b0\'fc
\f0 \
\
		
\f1 \'ce\'ca\'cc\'e2
\f0 :jsx
\f1 \'c7\'b0\'be\'b0\'cd\'bc\'c6\'ac
\f0 , ./ 
\f1 \'ba\'cd
\f0  / 
\f1 \'b6\'bc\'d6\'b8\'cf\'f2\'c1\'cb
\f0  public
\f1 \'c4\'bf\'c2\'bc
\f0 \
		
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 1.
\f1 \'c4\'a3\'bf\'e9\'bb\'af\'b5\'bc\'c8\'eb
\f0  src
\f1 \'c4\'bf\'c2\'bc\'c0\'ef
\f0  
\f1 \'d2\'aa\'d4\'da
\f0 jsx
\f1 \'c0\'ef
\f0 src
\f1 \'b5\'c4\'cd\'bc\'c6\'ac
\f0 \
			  2.
\f1 \'b5\'bc\'c8\'eb
\f0 public
\f1 \'c4\'bf\'c2\'bc\'cf\'c2\'b5\'c4\'cd\'bc\'c6\'ac
\f0 \
\
\
		
\f1 \'c8\'a5\'b3\'fd
\f0 eslint 
\f1 \'be\'af\'b8\'e6\'a3\'ba
\f0 \
			npm run eject\
			
\f1 \'d5\'d2\'b5\'bd\'cf\'ee\'c4\'bf\'cf\'c2
\f0 config/webpack.config.dev|prod\
			
\f1 \'d7\'a2\'ca\'cd\'b9\'d8\'d3\'da
\f0 eslint
\f1 \'b5\'c4\'b5\'bc\'c8\'eb\'ba\'cd
\f0 rules
\f1 \'b9\'e6\'d4\'f2
\f0 \
\
		
\f1 \'b4\'f2\'b0\'fc
\f0  + 
\f1 \'d4\'a4\'c0\'c0\'a3\'ba
\f0 \
			npm build\
			serve -s build --port 
\f1 \'b6\'cb\'bf\'da
\f0  --open \
			serve 
\f1 \'b7\'fe\'ce\'f1\'c6\'f7\'c3\'fc\'c1\'ee\'d0\'d0\'b9\'a4\'be\'df\'a3\'a8
\f0 npm i serve -g)\
\
			public
\f1 \'c4\'bf\'c2\'bc\'c0\'ef\'c3\'e6\'b5\'c4\'d7\'ca\'d4\'b4\'bb\'e1\'d6\'b1\'bd\'d3
\f0 copy
\f1 \'b5\'bd
\f0 build
\f1 \'c4\'bf\'c2\'bc\'a3\'ac
\f0 src
\f1 \'c0\'ef\'c3\'e6\'b5\'c4\'d7\'ca\'d4\'b4\'bb\'e1\'b4\'f2\'b0\'fc\'c4\'a3\'bf\'e9\'bb\'af
\f0 \
\
		help: https://github.com/facebook/create-react-app\
\
		
\f1 \'bd\'e2\'be\'f6\'b7\'bd\'b0\'b8
\f0 :\
			
\f1 \'cf\'ee\'c4\'bf\'d7\'ca\'d4\'b4\'a3\'ac\'be\'a1\'c1\'bf\'b4\'d3
\f0 src
\f1 \'c4\'bf\'c2\'bc\'cf\'c2\'d2\'fd\'c8\'eb\'a3\'ac\'b4\'f2\'b0\'fc\'ca\'b1\'bb\'e1\'c4\'a3\'bf\'e9\'bb\'af
\f0 \
			
\f1 \'cd\'bc\'c6\'ac\'d7\'ca\'d4\'b4\'c4\'a3\'bf\'e9\'bb\'af\'d2\'fd\'c8\'eb\'a3\'ac\'c8\'e7\'ba\'ce\'c0\'b4\'d7\'d4\'bf\'e2\'d6\'bb\'c4\'dc\'b7\'c5\'b5\'bd
\f0 public
\f1 \'c4\'bf\'c2\'bc\'cf\'c2
\f0 \
			\
	c) yeomen 
\f1 \'c4\'bf\'c2\'bc
\f0 		
\f1 \'d0\'e8\'d2\'aa\'b0\'b2\'d7\'b0
\f0 \
	npm install\
	npm run dev\
\
------------------------------------------\
\
ES6 
\f1 \'b4\'b4\'bd\'a8\'d7\'e9\'bc\'fe\'a3\'ba
\f0 	\
	import React from 'react';\
	class 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 |
\f1 \'c0\'e0
\f0  extends React.Component\{\
		
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0 ; //es7\
		state=\{\}  
\f1 \'d7\'b4\'cc\'ac
\f0 \
		constrctor(props)\{ //
\f1 \'d7\'e9\'bc\'fe\'d3\'d0\'d7\'b4\'cc\'ac
\f0  constrctor
\f1 \'be\'cd\'b3\'f6\'cf\'d6
\f0 \
			super(props) //
\f1 \'c0\'e0\'c8\'e7\'b9\'fb\'d3\'d0\'bc\'cc\'b3\'d0
\f0  super
\f1 \'be\'cd\'d2\'aa\'b3\'f6\'cf\'d6
\f0 \
				
\f1 \'d0\'e8\'d2\'aa\'d4\'da\'d7\'e9\'bc\'fe\'b9\'b9\'d4\'ec\'c6\'f7\'c4\'da\'b4\'a6\'c0\'ed\'b4\'ab\'b5\'dd\'b9\'fd\'c0\'b4\'b5\'c4
\f0 props
\f1 \'ca\'b1\'a3\'ac
\f0 props
\f1 \'b2\'ce\'ca\'fd\'be\'cd\'b3\'f6\'cf\'d6
\f0 \
			this.
\f1 \'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0   // es6\
			this.state=\{\}  
\f1 \'d7\'b4\'cc\'ac
\f0 \
		\}\
		render()\{  //
\f1 \'d7\'e9\'bc\'fe\'e4\'d6\'c8\'be\'ba\'af\'ca\'fd\'a3\'ac\'d2\'bb\'b6\'a8\'d2\'aa
\f0 return 
\f1 \'b7\'b5\'bb\'d8
\f0 jsx\
			return html|jsx\
		\}\
		
\f1 \'b7\'bd\'b7\'a8
\f0 1()\{\} 
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'b5\'c4\'b7\'bd\'b7\'a8
\f0 \
		
\f1 \'b7\'bd\'b7\'a8
\f0 2()\{\}\
	\}\
	
\f1 \'c0\'e0\'c3\'fb
\f0 .
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0     
\f1 \'be\'b2\'cc\'ac\'ca\'f4\'d0\'d4
\f0 |
\f1 \'c0\'e0\'ca\'f4\'d0\'d4
\f0 \
	
\f1 \'c0\'e0\'c3\'fb
\f0 .
\f1 \'b7\'bd\'b7\'a8
\f0 =fn    
\f1 \'be\'b2\'cc\'ac\'b7\'bd\'b7\'a8
\f0  | 
\f1 \'c0\'e0\'b7\'bd\'b7\'a8
\f0 \
\
ES5 
\f1 \'b4\'b4\'bd\'a8\'d7\'e9\'bc\'fe\'a3\'ba
\f0 	\
	var React = require('react');\
	let 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0  = React.createClass(\{\
	  getInitialState:function()\{  //
\f1 \'d7\'e9\'bc\'fe\'d7\'b4\'cc\'ac
\f0 \
	  	return \{\
	  		
\f1 \'ca\'fd\'be\'dd
\f0 :
\f1 \'d6\'b5
\f0 \
	  	\}\
	  \}\
	  render:function()\{\
	    return html|jsx\
	  \}\
	\});\

\f1 \'ca\'b9\'d3\'c3\'d7\'e9\'bc\'fe\'a3\'ba
\f0 \
	<HelloWorld/> \uc0\u8730 \
	<HelloWorld></HelloWorld>\
\

\f1 \'e4\'d6\'c8\'be\'a3\'a8\'c3\'e8\'bb\'ad\'a3\'a9\'d2\'b3\'c3\'e6
\f0 \
	import ReactDom from 'react-dom';\
	var RactDom = require('react-dom');\
\
	ReactDom.render(
\f1 \'d7\'e9\'bc\'fe
\f0 /dom,
\f1 \'b2\'e5\'c8\'eb\'b5\'e3
\f0  #app)\
\
----------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'ca\'f4\'d0\'d4
\f0 (props)
\f1 \'a3\'ba
\f0 \
	
\f1 \'b5\'f7\'d3\'c3\'d7\'e9\'bc\'fe\'a3\'ba
\f0 <
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0  
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 =
\f1 \'d6\'b5
\f0  
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 2=
\f1 \'d6\'b5
\f0 2 .. />	
\f1 \'b4\'ab\'b5\'dd\'ca\'f4\'d0\'d4
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf
\f0 : \{this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 \}   jsx
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0   
\f1 \'ca\'b9\'d3\'c3\'ca\'f4\'d0\'d4
\f0 \
			  this 
\f1 \'b4\'fa\'b1\'ed\'b5\'c4\'ca\'c7\'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed
\f0   \
\
	
\f1 \'d6\'b5\'c0\'e0\'d0\'cd\'a3\'ba\'d7\'d6\'b7\'fb
\f0 ||\{
\f1 \'b1\'ed\'b4\'ef\'ca\'bd
\f0 \}\
	this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 ==array 
\f1 \'d0\'e8\'d2\'aa\'d1\'ad\'bb\'b7
\f0 \
	arr
\f1 \'d6\'b5\'a3\'ba
\f0 this.props.
\f1 \'ca\'f4\'d0\'d4\'c3\'fb
\f0 .map(function()\{\
		return html\
	\})\
	json \{json\} 
\f1 \'b1\'a8\'b4\'ed\'a3\'ac
\f0  
\f1 \'b6\'d4\'cf\'f3\'ce\'de\'b7\'a8\'d6\'b1\'bd\'d3\'cd\'a8\'b9\'fd
\f0 \{obj\}
\f1 \'d5\'b9\'ca\'be
\f0 ->\{obj.key\}\
\
----------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'d6\'ae\'bc\'e4\'ca\'fd\'be\'dd\'b4\'ab\'b5\'dd
\f0 (props
\f1 \'b4\'ab\'b5\'dd
\f0 )\
	
\f1 \'b8\'b8\'b5\'bd\'d7\'d3
\f0 	props 
\f1 \'b4\'ab\'b5\'dd
\f0  <Child 
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'ca\'fd\'be\'dd
\f0 />\
	
\f1 \'d7\'d3\'b5\'bd\'b8\'b8
\f0   props 
\f1 \'b4\'ab\'b5\'dd
\f0  <Child 
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'b8\'b8\'b7\'bd\'b7\'a8
\f0 />\
			\{this.props.
\f1 \'ca\'f4\'d0\'d4
\f0 .bind(this,xx)\}\
------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'b5\'c4\'d7\'b4\'cc\'ac
\f0  (state|
\f1 \'ca\'fd\'be\'dd
\f0 )\
	getInitialState:fn()\{return \{
\f1 \'d7\'b4\'cc\'ac\'c3\'fb
\f0 :
\f1 \'d6\'b5
\f0 ,xx:oo\}\}   ES5\
\
	
\f1 \'c0\'e0\'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 =
\f1 \'d6\'b5
\f0  es7 \
	constructor()\{  es6\
		this.state=\{\}  | 
\f1 \'c0\'e0\'ca\'b5\'c0\'fd\'ca\'f4\'d0\'d4
\f0 \
	\}\
------------------------------------------\

\f1 \'ca\'c2\'bc\'fe
\f0 :
\f1 \'cd\'d5\'b7\'e5\'c3\'fc\'c3\'fb
\f0 \
	<
\f1 \'d4\'aa\'cb\'d8
\f0  onClick=\{this.
\f1 \'b7\'bd\'b7\'a8
\f0 \}\
	onClick=\{this.
\f1 \'b7\'bd\'b7\'a8
\f0 .bind(null,
\f1 \'d6\'b5
\f0 )\}\
	
\f1 \'b7\'bd\'b7\'a8
\f0 (ev)	ev 
\f1 \'b4\'fa\'c0\'ed\'ca\'c2\'bc\'fe\'b6\'d4\'cf\'f3
\f0  ev.target 
\f1 \'b7\'b5\'bb\'d8\'d0\'e9\'c4\'e2
\f0 dom \uc0\u8730 \
------------------------------------------\
\
refs:  dom\
\

\f1 \'bb\'f1\'c8\'a1
\f0 jsx
\f1 \'d4\'aa\'cb\'d8
\f0   
\f1 \'bb\'f1\'c8\'a1\'b5\'c4\'ca\'c7\'d5\'e6\'ca\'b5
\f0 dom\
	
\f1 \'b8\'f8
\f0 jsx
\f1 \'d4\'aa\'cb\'d8
\f0  
\f1 \'c9\'e8\'d6\'c3
\f0 ref
\f1 \'ca\'f4\'d0\'d4
\f0 =
\f1 \'c3\'fb\'d7\'d6
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'a3\'ba
\f0  this.refs.
\f1 \'c3\'fb\'d7\'d6
\f0   jsx
\f1 \'d4\'aa\'cb\'d8
\f0 \
\
------------------------------------------\
\

\f1 \'cb\'ab\'cf\'f2\'b0\'f3\'b6\'a8\'a3\'ba
\f0 \
	react 
\f1 \'c4\'ac\'c8\'cf\'ca\'c7\'b5\'a5\'cf\'ee\'b0\'f3\'b6\'a8
\f0   defaultValue \
\
	value=\{this.state.
\f1 \'ca\'fd\'be\'dd\'c3\'fb
\f0 \}  model->view\
	onChange=\{this.
\f1 \'bc\'e0\'cc\'fd\'b7\'bd\'b7\'a8
\f0 \}   view->model(  setState )\
	
\f1 \'bc\'e0\'cc\'fd\'b7\'bd\'b7\'a8
\f0 : this.setState(...)\
\
------------------------------------------\
\
react 
\f1 \'b4\'a6\'c0\'ed
\f0  
\f1 \'d1\'f9\'ca\'bd
\f0 :\
	
\f1 \'d4\'da
\f0 index.html 
\f1 \'a3\'ba
\f0  
\f1 \'d2\'fd\'c8\'eb
\f0   link/style  
\f1 \'b3\'a1\'be\'b0\'a3\'ba\'d3\'a6\'d3\'c3\'b5\'c4\'b9\'ab\'b9\'b2\'d1\'f9\'ca\'bd
\f0 \
	
\f1 \'d4\'da\'d7\'e9\'bc\'fe\'c0\'ef\'c3\'e6\'d2\'fd\'c8\'eb\'a3\'ba
\f0  import './css/xx.css'  
\f1 \'ca\'c7\'c8\'ab\'be\'d6
\f0 \
	
\f1 \'c4\'a3\'bf\'e9\'bb\'af
\f0 :	import 
\f1 \'b1\'e4\'c1\'bf
\f0   from './css/xx.css' 
\f1 \'c4\'a3\'bf\'e9
\f0    
\f1 \'ca\'b9\'d3\'c3
\f0 ?\
		webpack
\f1 \'c5\'e4\'d6\'c3
\f0  "style-loader!css-loader?modules"\
		<xx classNa
\f1 \'c3\'c0\'c5\'ae\'c4\'d8
\f0 me=\{
\f1 \'b1\'e4\'c1\'bf
\f0 .
\f1 \'c0\'e0\'c3\'fb
\f0 \} \
	jsx:\
		className="
\f1 \'c0\'e0\'c3\'fb
\f0 " className=\{
\f1 \'b7\'b5\'bb\'d8\'d7\'d6\'b7\'fb
\f0 \} 
\f1 \'b7\'b5\'bb\'d8\'d7\'d6\'b7\'fb
\f0 ='aa bb active'\
		style="key:value;key:value"  style=\{\{key:value,key:value\}\}\
		css3 
\f1 \'b6\'af\'bb\'ad
\f0  tansition/animation\
\
	webpack:\
		css
\f1 \'c4\'a3\'bf\'e9\'bb\'af\'b4\'a6\'c0\'ed
\f0 : \
			\{test: /\\.css$/, loader: "style-loader!css-loader?modules"\},\
	create-react-app\
		
\f1 \'d7\'d4\'b4\'f8\'c4\'a3\'bf\'e9\'bb\'af
\f0 \
------------------------------------------------------\
\

\f1 \'c9\'fa\'c3\'fc\'d6\'dc\'c6\'da\'c1\'f7\'b3\'cc
\f0 :\
	
\f1 \'ca\'b5\'c0\'fd\'bb\'af
\f0  ->  
\f1 \'b4\'e6\'d4\'da\'c6\'da
\f0   -> 
\f1 \'cf\'fa\'bb\'d9\'ca\'b1
\f0 \
	
\f1 \'ca\'b5\'c0\'fd\'bb\'af
\f0 :\
		es5: \
			1.
\f1 \'c8\'a1\'b5\'c3\'c4\'ac\'c8\'cf\'ca\'f4\'d0\'d4
\f0 (getDefaultProps) 
\f1 \'cd\'e2\'b2\'bf\'b4\'ab\'c8\'eb\'b5\'c4
\f0 props\
			2.
\f1 \'b3\'f5\'ca\'bc\'d7\'b4\'cc\'ac
\f0 (getInitailState)  state
\f1 \'d7\'b4\'cc\'ac
\f0 \
		    3.
\f1 \'bc\'b4\'bd\'ab\'b9\'d2\'d4\'d8
\f0  componentWillMount\
		    4.
\f1 \'c3\'e8\'bb\'ad
\f0 DOM  render\
		    5.
\f1 \'b9\'d2\'d4\'d8\'cd\'ea\'b1\'cf
\f0  componentDidMount\
		es6:\
			1.
\f1 \'c8\'a1\'b5\'c3\'c4\'ac\'c8\'cf\'ca\'f4\'d0\'d4
\f0 (getDefaultProps) 
\f1 \'cd\'e2\'b2\'bf\'b4\'ab\'c8\'eb\'b5\'c4
\f0 props\
			2.
\f1 \'b3\'f5\'ca\'bc\'d7\'b4\'cc\'ac
\f0 (getInitailState)  state
\f1 \'d7\'b4\'cc\'ac
\f0 \
				1 && 2 
\f1 \'b6\'bc\'d4\'da\'b9\'b9\'d4\'ec\'c6\'f7\'c0\'ef\'c3\'e6\'cd\'ea\'b3\'c9
\f0  \
				constructor(props)\{\
					super(props) == getDefaultProps\
					this.state=\{\} == getInitailState\
				\}\
		    3.
\f1 \'bc\'b4\'bd\'ab\'b9\'d2\'d4\'d8
\f0  componentWillMount\
		    4.
\f1 \'c3\'e8\'bb\'ad
\f0 DOM  render\
		    5.
\f1 \'b9\'d2\'d4\'d8\'cd\'ea\'b1\'cf
\f0  componentDidMount\
	
\f1 \'b4\'e6\'d4\'da\'c6\'da
\f0 :\
		1.
\f1 \'ca\'c7\'b7\'f1\'b8\'fc\'d0\'c2
\f0  shouldComponentUpdate  
\f1 \'d6\'b8\'ca\'d3\'cd\'bc
\f0  return false/true\
		2.
\f1 \'bc\'b4\'bd\'ab\'b8\'fc\'d0\'c2
\f0  componentWillUpdate\
		3.
\f1 \'c3\'e8\'bb\'ad
\f0 dom  render\
		4.
\f1 \'c3\'e8\'bb\'ad\'bd\'e1\'ca\'f8
\f0  componentDidUpdate\
	
\f1 \'cf\'fa\'bb\'d9\'ca\'b1
\f0 :\
		
\f1 \'bc\'b4\'bd\'ab\'d0\'b6\'d4\'d8
\f0  componentWillUnmount\
\
\

\f1 \'ca\'b5\'c0\'fd\'bb\'af
\f0 ->
\f1 \'b4\'e6\'d4\'da
\f0 (
\f1 \'b8\'fc\'d0\'c2
\f0 )->
\f1 \'cf\'fa\'bb\'d9\'ca\'b1
\f0 \
	getDefaultProps->getInitialState->componentWillMount->render->(
\f1 \'d7\'d3\'d7\'df\'d2\'bb\'cc\'d7
\f0 )->componentDidMount\
	->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate->\
	->componentWillUnmount\
\

\f1 \'d7\'d3\'b5\'c4\'ca\'fd\'be\'dd\'b8\'fc\'d0\'c2\'a3\'ac\'b8\'b8\'b2\'bb\'bb\'e1\'b8\'fc\'d0\'c2
\f0 \

\f1 \'b8\'b8\'b5\'c4\'ca\'fd\'be\'dd\'b8\'fc\'d0\'c2\'a3\'ac\'d7\'d3\'bb\'e1\'b8\'fc\'d0\'c2
\f0 \
-------------------------------------------------------\
\

\f1 \'ca\'fd\'be\'dd\'bd\'bb\'bb\'a5\'a3\'ba
\f0 \
	react-resource / axios   
\f1 \'d2\'bb\'d1\'f9\'d3\'c3
\f0 \
	jquery\
		$.ajax(\{\
			type:'get/post',\
			url:'...',\
			success:function(res)\{\},\
			error:function()\{\}\
		\})\
\
	fetch	
\f1 \'d4\'ad\'c9\'fa\'be\'cd\'d3\'d0
\f0 \
	fetch(url).then(
\f1 \'b3\'c9\'b9\'a6\'ba\'af\'ca\'fd
\f0 (res)).catch(err)\
	res.ok -> true/false 
\f1 \'b3\'c9\'b9\'a6
\f0 /
\f1 \'ca\'a7\'b0\'dc
\f0 \
	res.status - > 
\f1 \'d7\'b4\'cc\'ac\'c2\'eb
\f0 \
	res.body 
\f1 \'ca\'fd\'be\'dd
\f0  
\f1 \'ca\'fd\'be\'dd\'c1\'f7
\f0 (stream)\
	res.text() 
\f1 \'d7\'aa\'bb\'bb
\f0  
\f1 \'ce\'c4\'b1\'be
\f0 (string) \
		
\f1 \'b9\'fd\'b3\'cc\'d2\'ec\'b2\'bd\'a3\'ba
\f0 	return res.text()\
		
\f1 \'cd\'ac\'b2\'bd\'a3\'ba
\f0  res.text().then((data)=>\{\})	data:
\f1 \'d7\'aa\'bb\'bb\'ba\'f3\'b5\'c4\'ca\'fd\'be\'dd
\f0 \
	res.json() 
\f1 \'d7\'aa
\f0   
\f1 \'b6\'d4\'cf\'f3
\f0 \
\
--------------------------------------------------------------------------------------------\

\f1 \'cb\'bc\'cf\'eb
\f0 :\
	
\f1 \'d7\'e9\'bc\'fe\'b2\'f0\'b7\'d6\'c4\'bf\'b1\'ea
\f0 :
\f1 \'ce\'aa\'c1\'cb\'b8\'b4\'d3\'c3
\f0 \
		
\f1 \'b7\'bd\'b7\'a8
\f0 -
\f1 \'a1\'b7\'b2\'d9\'d7\'f7\'ca\'fd\'be\'dd
\f0 (
\f1 \'ca\'fd\'be\'dd
\f0 |
\f1 \'d7\'b4\'cc\'ac\'d4\'da\'c4\'c4\'a3\'ac\'b7\'bd\'b7\'a8\'be\'cd\'d3\'a6\'b8\'c3\'d4\'da\'c4\'c4
\f0 )\
	
\f1 \'d7\'e9\'bc\'fe\'c8\'e7\'ba\'ce\'b2\'f0\'a3\'ba\'b5\'a5\'d2\'bb\'d4\'ad\'d4\'f2
\f0 (
\f1 \'c8\'e7\'b9\'fb\'b7\'a2\'cf\'d6\'a3\'ac\'b5\'b1\'c7\'b0\'d7\'e9\'bc\'fe\'b5\'c4\'b9\'a6\'c4\'dc\'b6\'e0\'c1\'cb\'a3\'ac\'be\'cd\'bf\'c9\'d2\'d4\'b2\'f0\'b7\'d6\'c1\'cb
\f0 )\
	
\f1 \'d7\'b4\'cc\'ac\'d3\'a6\'b8\'c3\'b8\'f8\'cb\'ad
\f0 : 
\f1 \'be\'a1\'c1\'bf\'b8\'f8\'b6\'a5\'b2\'e3\'d7\'e9\'bc\'fe
\f0 ,->props->
\f1 \'d7\'d3\'d7\'e9\'bc\'fe\'a3\'a8\'ce\'de\'d7\'b4\'cc\'ac
\f0 state
\f1 \'a3\'a9
\f0 \
	props
\f1 \'c8\'a1\'c3\'fb\'a3\'ba\'b4\'d3\'d7\'e9\'bc\'fe\'b1\'be\'c9\'ed\'b5\'c4\'bd\'c7\'b6\'c8\'c0\'b4\'c3\'fc\'c3\'fb
\f0 , 
\f1 \'b6\'f8\'b2\'bb\'ca\'c7\'cb\'fc\'b1\'bb\'ca\'b9\'d3\'c3\'b5\'c4\'c9\'cf\'cf\'c2\'ce\'c4\'bb\'b7\'be\'b3
\f0 \
	
\f1 \'b4\'bf\'ba\'af\'ca\'fd
\f0 :
\f1 \'b2\'bb\'bb\'e1\'ca\'d4\'cd\'bc\'b8\'c4\'b1\'e4\'cb\'fc\'c3\'c7\'b5\'c4\'ca\'e4\'c8\'eb\'a3\'ac\'b2\'a2\'c7\'d2\'b6\'d4\'d3\'da\'cd\'ac\'d1\'f9\'b5\'c4\'ca\'e4\'c8\'eb
\f0 ,
\f1 \'ca\'bc\'d6\'d5\'bf\'c9\'d2\'d4\'b5\'c3\'b5\'bd\'cf\'e0\'cd\'ac\'b5\'c4\'bd\'e1\'b9\'fb
\f0 ,React 
\f1 \'d7\'e9\'bc\'fe\'b6\'bc\'b1\'d8\'d0\'eb\'ca\'c7\'b4\'bf\'ba\'af\'ca\'fd\'a3\'ac\'b2\'a2\'bd\'fb\'d6\'b9\'d0\'de\'b8\'c4\'c6\'e4\'d7\'d4\'c9\'ed
\f0  props\
	setState: 
\f1 \'ca\'c7\'d2\'ec\'b2\'bd\'b5\'c4
\f0 ,
\f1 \'cb\'f9\'d2\'d4\'b2\'bb\'c4\'dc\'d2\'c0\'c0\'b5\'c9\'cf\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'d6\'b5\'a3\'ac\'d7\'f7\'ce\'aa\'cf\'c2\'d2\'bb\'b8\'f6
\f0 setState
\f1 \'b5\'c4\'b2\'ce\'ca\'fd
\f0 \
		
\f1 \'bd\'e2\'be\'f6\'a3\'ba
\f0 \
			1) this.setState(function(prevState,props)\{\})\
			  
\f1 \'ba\'af\'ca\'fd\'bd\'d3\'ca\'d5\'c7\'b0\'d2\'bb\'b8\'f6\'d7\'b4\'cc\'ac\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  1 
\f1 \'b8\'f6\'b2\'ce\'ca\'fd\'a3\'ac
\f0  
\f1 \'b2\'a2\'bd\'ab\'b8\'fc\'d0\'c2\'ba\'f3\'b5\'c4\'d6\'b5\'d7\'f7\'ce\'aa\'b5\'da
\f0  2
\f1 \'b8\'f6\'b2\'ce\'ca\'fd
\f0 \
		      \
		      
\f1 \'b8\'fc\'d0\'c2\'bb\'e1\'b1\'bb\'ba\'cf\'b2\'a2
\f0 ,\
		    2) 
\f1 \'ba\'af\'ca\'fd\'bd\'da\'c1\'f7
\f0 (
\f1 \'d2\'ec\'b2\'bd\'b2\'d9\'d7\'f7
\f0 )\
		    3) ev.target......\
		setState 
\f1 \'d6\'bb\'c4\'dc\'d4\'da\'b8\'fc\'d0\'c2\'c6\'da\'ba\'cd\'b9\'d2\'d4\'d8\'ba\'f3\'ca\'b9\'d3\'c3
\f0    \
--------------------------------------------------------------------------------------------\

\f1 \'ce\'de\'d7\'b4\'cc\'ac
\f0 (
\f1 \'c3\'bb\'d3\'d0
\f0 state)
\f1 \'d7\'e9\'bc\'fe\'a3\'a8\'bc\'f2\'d0\'b4\'a3\'a9\'b4\'b4\'bd\'a8\'a3\'ba
\f0 \
	const 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 =(props)=>(jsx)\
	const 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 =props=>jsx\
	const 
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0 =(props)=>\{\
		let xx=props.xx\
		return html\
	\}\
\

\f1 \'ce\'de\'d7\'b4\'cc\'ac\'d7\'e9\'bc\'fe\'cc\'d8\'b5\'e3\'a3\'ba
\f0 \
	
\f1 \'b2\'bb\'c4\'dc\'b7\'c3\'ce\'ca
\f0 this
\f1 \'b6\'d4\'cf\'f3
\f0 (this.ref,this.state  ... )\
	
\f1 \'d6\'bb\'c4\'dc\'b7\'c3\'ce\'ca
\f0 props\
	
\f1 \'ce\'de\'d0\'e8\'ca\'b5\'c0\'fd\'bb\'af\'a3\'ac\'e4\'d6\'c8\'be\'d0\'d4\'c4\'dc\'b8\'df
\f0 \
	this.
\f1 \'b7\'bd\'b7\'a8
\f0 /
\f1 \'b9\'b3\'d7\'d3\'a3\'a8\'c9\'fa\'c3\'fc\'d6\'dc\'c6\'da
\f0 )  
\f1 \'d2\'b2\'b2\'bb\'d0\'e8\'d2\'aa
\f0 \
\
--------------------------------------------------------------------------------------------\

\f1 \'d7\'f7\'d2\'b5
\f0 :\
	
\f1 \'ce\'a2\'b2\'a9
\f0 :\
	
\f1 \'d0\'ed\'d4\'b8\'c7\'bd
\f0 :\
	 	react
\f1 \'ca\'b5\'cf\'d6\'ca\'fd\'be\'dd\'bd\'bb\'bb\'a5
\f0 \
\
	todolist 
\f1 \'d7\'e9\'bc\'fe\'b2\'f0\'b7\'d6
\f0  -> 
\f1 \'ce\'de\'d7\'b4\'cc\'ac\'d7\'e9\'bc\'fe
\f0 \
\
\
\cf2 day3:\
\cf3 react
\f1 \'c2\'b7\'d3\'c9
\f0 3.X
\f1 \'a3\'ba
\f0 \
	
\f1 \'b8\'c9\'c2\'ef\'b5\'c4\'a3\'ba\'b8\'f9\'be\'dd\'b2\'bb\'cd\'ac\'b5\'c4
\f0 URL
\f1 \'a3\'ac\'d5\'b9\'ca\'be\'b2\'bb\'cd\'ac\'b5\'c4\'c4\'da\'c8\'dd
\f0 \
	
\f1 \'b0\'b2\'d7\'b0\'a3\'ba
\f0 npm install react-router@3.2.1 -D\
	
\f1 \'d2\'fd\'c8\'eb\'a3\'ba
\f0 import \{\
			  Router,	
\f1 \'c2\'b7\'d3\'c9\'b6\'d4\'cf\'f3
\f0 \
			  Route,	
\f1 \'d2\'bb\'b8\'f6\'c2\'b7\'d3\'c9\'c5\'e4\'d6\'c3
\f0 \
			  hashHistory,	
\f1 \'b9\'fe\'cf\'a3\'c4\'a3\'ca\'bd
\f0 \
			  IndexRoute,	
\f1 \'c4\'ac\'c8\'cf\'c2\'b7\'d3\'c9
\f0 \
			  Link,		
\f1 \'c2\'b7\'d3\'c9\'b5\'f7\'d3\'c3
\f0 \
			  Redirect	
\f1 \'d6\'d8\'b6\'a8\'cf\'f2
\f0 \
			  browserHistory 
\f1 \'c0\'fa\'ca\'b7\'bc\'c7\'c2\'bc
\f0 \
			\} from 'react-router';\
	
\f1 \'c5\'e4\'d6\'c3\'c2\'b7\'d3\'c9
\f0 : 
\f1 \'c2\'b7\'d3\'c9\'b6\'d4\'cf\'f3
\f0 Router
\f1 \'a3\'ac\'d2\'bb\'b6\'a8\'d2\'aa\'b0\'fc\'b9\'fc\'d2\'bb\'b8\'f6\'b8\'f9\'c2\'b7\'d3\'c9
\f0 \
		Router history=\{hashHistory\}\
			Route path="/" ..\
				xx\
				xx\
					oo\
					oo\
				xx\
					oo\
				xx\
	
\f1 \'b5\'f7\'d3\'c3\'a3\'ba
\f0 hash
\f1 \'c4\'a3\'ca\'bd\'cf\'c2\'b2\'bb\'d3\'c3\'bc\'d3
\f0 #/  browser
\f1 \'c4\'a3\'ca\'bd\'d0\'e8\'d2\'aa\'bc\'d3
\f0 #\
		Link to="path
\f1 \'c3\'fb
\f0 "  
\f1 \'d7\'aa\'bb\'bb\'b3\'c9
\f0 DOM a ,
\f1 \'b2\'bb\'bf\'c9\'b8\'c4
\f0 \
		path
\f1 \'c3\'fb
\f0 : string|| \{\{pathname:'news/003',query:\{a:1,b:2\}\}\}\
	
\f1 \'d5\'b9\'ca\'be\'c7\'f8
\f0 : 
\f1 \'d5\'d2\'d7\'e9\'bc\'fe\'d7\'d4\'c9\'ed\'d2\'aa
\f0 props\
		\{this.props.children\} 
\f1 \'d5\'b9\'ca\'be\'c7\'f8
\f0 \
		\{this.props.params.aid\} 
\f1 \'b2\'ce\'ca\'fd
\f0 \
		\{this.props.location.query\} 
\f1 \'ca\'fd\'be\'dd
\f0 \
		\{this.props.location.pathname\} 
\f1 \'c2\'b7\'be\'b6
\f0 \
	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'bb\'f1\'c8\'a1
\f0 router
\f1 \'b6\'d4\'cf\'f3
\f0 	this.props.router\
		this.props.router.push('xxx')/replace('')/goBack/goForward/go(-1)\
		
\f1 \'cc\'f8\'d7\'aa\'a3\'ba
\f0 this.props.router/ hashHistory/window.history 
\f1 \'b6\'bc\'ca\'c7\'b2\'d9\'d7\'f7\'c0\'fa\'ca\'b7\'bc\'c7\'c2\'bc
\f0 \
	
\f1 \'bc\'a4\'bb\'ee\'ba\'f3\'c2\'b7\'d3\'c9\'d1\'f9\'ca\'bd\'a3\'ba
\f0 \
		activeClassName="
\f1 \'cd\'e2\'b2\'bf
\f0 css
\f1 \'b5\'c4\'c0\'e0\'c3\'fb
\f0 "  \
		activeStyle=\{json\}	json=\{bacgroundColor:xx\}
\f1 \'cd\'d5\'b7\'e5
\f0 \
\
\
	browserHistory
\f1 \'a3\'ba\'d0\'e8\'d2\'aa\'c5\'e4\'d6\'c3
\f0 webpack
\f1 \'b7\'fe\'ce\'f1
\f0 (package.json + --history-api-fallback)\
		
\f1 \'bd\'c5\'ca\'d6\'b2\'bb\'d0\'e8\'d2\'aa
\f0 \
		Link
\f1 \'b5\'f7\'d3\'c3\'c2\'b7\'d3\'c9\'ca\'b1\'a3\'ac\'d0\'e8\'d2\'aa
\f0 /xx\
		<Link to="/home"\
		<Link to="/user/reg"\
\
	
\f1 \'ca\'d8\'ce\'c0
\f0 \
		
\f1 \'c7\'b0\'d6\'c3\'bd\'f8\'c8\'eb\'c7\'b0\'a3\'ac\'ca\'fd\'be\'dd\'d4\'a4\'d4\'d8
\f0  
\f1 \'a3\'ac\'c2\'b7\'d3\'c9\'c5\'e4\'d6\'c3\'c4\'da\'cd\'ea\'b3\'c9
\f0 \
			<Route\'a0path="login"\'a0component=\{Login\} onEnter=\{enterRoute\}/>\
			const enterRoute=(to, redirect,next)=>\{\
			  to //
\f1 \'c8\'a5\'cf\'f2\'c2\'b7\'d3\'c9
\f0 \
			  redirect 
\f1 \'d6\'d8\'b6\'a8\'cf\'f2\'ba\'af\'ca\'fd
\f0  replaceState(url)\
			  next();//
\f1 \'d4\'ca\'d0\'ed
\f0 \
			  to.location.query.data=data;//
\f1 \'c4\'a3\'c4\'e2\'bd\'d3\'ca\'d5\'b5\'bd\'b5\'c4\'ca\'fd\'be\'dd\'a3\'ac\'b2\'a2\'d0\'de\'b8\'c4
\f0 \
		
\f1 \'c0\'eb\'bf\'aa\'a3\'ac\'ba\'f3\'d6\'c3
\f0 	
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf\'cd\'ea\'b3\'c9
\f0 \
\
			
\f1 \'c9\'e8\'d6\'c3\'c2\'b7\'d3\'c9\'a3\'ac\'c0\'eb\'bf\'aa\'b9\'b3\'d7\'d3
\f0  , 
\f1 \'d7\'e9\'bc\'fe
\f0 DidMount
\f1 \'c9\'e8\'d6\'c3
\f0 \
			this.props.router.setRouteLeaveHook(\
		      this.props.route, \
		      this.routerWillLeave\
		    )\
\
		    
\f1 \'c0\'eb\'bf\'aa\'b9\'b3\'d7\'d3
\f0 \
		    routerWillLeave(nextLocation) \
		    return false/true 
\f1 \'d4\'ca\'d0\'ed\'bb\'f2\'d5\'df\'b2\'bb\'d4\'ca\'d0\'ed
\f0 \
		    nextLocation 
\f1 \'d2\'aa\'c8\'a5\'cf\'f2\'b5\'c4\'c2\'b7\'d3\'c9
\f0 \
\
\
--------------react + react-route3 + create-react-app---------------------\
1. 
\f1 \'cf\'ee\'c4\'bf\'b7\'d6\'ce\'f6
\f0 ,
\f1 \'d7\'e9\'bc\'fe\'b0\'b2\'c5\'c5
\f0 \
|-public\
	|- data\
		|- 
\f1 \'ca\'fd\'be\'dd
\f0 \
|-node_modules\
|-src\
	|- components\
		|- App\
		|- NavBar / FootBar\
		|- Home / Follow / Column / User\
		|- Article / Login / Reg\
		|- Slider / Error / NewList\
	|- common(filters)\
		|- date.js / fillzero.js/...\
	|- assets\
		|- css\
		|- img\
		|- js\
	|- store\
		|- ..\
	Index.js / RouterConfig.js\
index.html\
package.json\
------------------------------------------------\
2. 
\f1 \'b2\'bc\'be\'d6
\f0 (
\f1 \'c7\'d0\'cd\'bc
\f0 ,mint-ui,elementUI...ant.design),
\f1 \'c4\'a3\'b0\'e5\'d2\'c6\'d6\'b2
\f0 \
	
\f1 \'d1\'f9\'ca\'bd\'a3\'ba\'c8\'ab\'be\'d6\'d2\'fd\'c8\'eb
\f0 \
		src / import \
6. 
\f1 \'bf\'d8\'d6\'c6
\f0 navbar / footbar / loading \
	render
\f1 \'ba\'af\'ca\'fd\'a3\'ac\'c2\'b7\'d3\'c9\'cc\'f8\'d7\'aa
\f0 render
\f1 \'b6\'bc\'bb\'e1\'d6\'b4\'d0\'d0
\f0 ,
\f1 \'bb\'f1\'c8\'a1
\f0 App
\f1 \'a3\'ac\'c4\'da\'b2\'bf\'c2\'b7\'d3\'c9\'b6\'d4\'cf\'f3\'b5\'c4
\f0 pathname\
	this.props.router.location.pathname -> navbar / footbar\
\
6.5 
\f1 \'c8\'ab\'be\'d6
\f0 loading\
   pubsub [App
\f1 \'b6\'a9\'d4\'c4
\f0 ,  home/follow/.. 
\f1 \'b7\'a2\'b2\'bc
\f0 ]\
   
\f1 \'ce\'ca\'cc\'e2\'a3\'ba\'d3\'c3\'bb\'a7\'cb\'d9\'b6\'c8\'c7\'d0\'bb\'bb\'a3\'ac
\f0 this.setState
\f1 \'b1\'a8\'b4\'ed
\f0 \
   
\f1 \'b7\'d6\'ce\'f6\'a3\'ba
\f0 fetch
\f1 \'d6\'d0\'b6\'cf
\f0 --
\f1 \'ce\'de\'b7\'a8\'d6\'d0\'b6\'cf
\f0 /isMounted
\f1 \'ca\'f4\'d0\'d4
\f0 (es5)/
\f1 \'b8\'f8\'c4\'a3\'bf\'e9\'b4\'e6\'b1\'e4\'c1\'bf
\f0 \
   
\f1 \'bd\'e2\'be\'f6\'a3\'ba\'b8\'df\'b9\'e2\'ba\'d0\'a3\'a8
\f0 lightBox
\f1 \'a3\'a9
\f0 \uc0\u8730   / 
\f1 \'d7\'d4\'b8\'f6\'ce\'ac\'bb\'a4\'d2\'bb\'b8\'f6\'c4\'a3\'bf\'e9\'ca\'f4\'d0\'d4
\f0  this.
\f1 \'d7\'d4\'b6\'a8\'d2\'e5\'ca\'f4\'d0\'d4
\f0 \
------------------------------------------------\

\f1 \'d7\'e9\'bc\'fe\'b4\'ab\'d6\'b5
\f0 :\
	a) props\
	b) pub/sub
\f1 \'c4\'a3\'ca\'bd
\f0  
\f1 \'cf\'fb\'cf\'a2\'cd\'a8\'d6\'aa
\f0 (
\f1 \'b9\'db\'b2\'ec\'d5\'df\'c4\'a3\'ca\'bd
\f0 )  npm install npm install pubsub-js -D\
		
\f1 \'b6\'a9\'d4\'c4
\f0 :	token=pubsub.subscribe('
\f1 \'cf\'fb\'cf\'a2\'c3\'fb
\f0 ',
\f1 \'bb\'d8\'b5\'f7\'ba\'af\'ca\'fd
\f0 ('
\f1 \'cf\'fb\'cf\'a2\'c3\'fb
\f0 ',
\f1 \'ca\'fd\'be\'dd
\f0 ))\
		
\f1 \'b7\'a2\'b2\'bc\'a3\'ba
\f0   pubsub.publish('
\f1 \'cf\'fb\'cf\'a2\'c3\'fb
\f0 ',
\f1 \'ca\'fd\'be\'dd
\f0 )\
		
\f1 \'c7\'e5\'b3\'fd\'d6\'b8\'b6\'a8\'b6\'a9\'d4\'c4\'a3\'ba
\f0 pubsub.unsubscribe(onUserAdd);\
		
\f1 \'c7\'e5\'b3\'fd\'cb\'f9\'d3\'d0\'a3\'ba
\f0 pubsub.clearAllSubscriptions()\
\
		
\f1 \'d7\'a2\'d2\'e2\'a3\'ba\'b6\'a9\'d4\'c4\'b7\'bd\'b2\'bb\'b4\'e6\'d4\'da\'c1\'cb\'a3\'ac\'cf\'e0\'b9\'d8\'b5\'c4\'b6\'a9\'d4\'c4\'d7\'a2\'d2\'e2\'c7\'e5\'b3\'fd
\f0 \
\
	c) 
\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed
\f0 (redux)\
------------------------------------------------\
\

\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed
\f0   flux(
\f1 \'cb\'bc\'cf\'eb
\f0 )\
\
	 vue
\f1 \'ca\'b5\'cf\'d6
\f0 (vuex) react
\f1 \'ca\'b5\'cf\'d6
\f0 (react-redux)\
\

\f1 \'d7\'b4\'cc\'ac\'b9\'dc\'c0\'ed
\f0 (redux)
\f1 \'a3\'ba
\f0 \
	
\f1 \'bf\'c9\'d2\'d4\'cd\'ac\'d2\'bb\'b8\'f6\'b5\'d8\'b7\'bd\'b2\'e9\'d1\'af\'d7\'b4\'cc\'ac\'a3\'ac\'b8\'c4\'b1\'e4\'d7\'b4\'cc\'ac\'a3\'ac\'b4\'ab\'b2\'a5\'d7\'b4\'cc\'ac
\f0 \
	
\f1 \'ba\'ce\'ca\'b1\'d3\'c3\'a3\'ba\'d6\'d0\'b4\'f3\'cf\'ee\'c4\'bf
\f0 ,
\f1 \'d7\'e9\'bc\'fe\'d7\'b4\'cc\'ac\'d0\'e8\'d2\'aa\'b9\'b2\'cf\'ed\'a3\'ac\'d4\'da\'c8\'ce\'ba\'ce\'b5\'d8\'b7\'bd\'b6\'bc\'bf\'c9\'d2\'d4\'c4\'c3\'b5\'bd\'a3\'ac\'d7\'e9\'bc\'fe\'d0\'e8\'d2\'aa\'b8\'c4\'b1\'e4\'c8\'ab
\f0 			
\f1 \'be\'d6\'d7\'b4\'cc\'ac\'a3\'ac\'d2\'bb\'b8\'f6\'d7\'e9\'bc\'fe\'d0\'e8\'d2\'aa\'b8\'c4\'b1\'e4\'c1\'ed\'cd\'e2\'d2\'bb\'b8\'f6\'d7\'e9\'bc\'fe\'b5\'c4\'d7\'b4\'cc\'ac
\f0 \

\f1 \'cb\'bc\'ce\'ac\'a3\'ba
\f0 \
	
\f1 \'d4\'da\'b6\'a5\'b2\'e3\'d7\'e9\'bc\'fe\'b4\'b4\'bd\'a8
\f0 store(
\f1 \'d7\'b4\'cc\'ac
\f0 ),
\f1 \'c6\'e4\'cb\'fb\'b5\'d7\'b2\'e3\'d7\'e9\'bc\'fe\'b9\'b2\'cf\'ed\'d5\'e2\'b8\'f6
\f0 store(
\f1 \'d7\'b4\'cc\'ac
\f0 )\

\f1 \'ca\'fd\'be\'dd\'c1\'f7\'b6\'af\'a3\'ba
\f0 \
	component->action->reducer->state->component\
	component: 
\f1 \'d5\'b9\'ca\'be\'bd\'e1\'b9\'fb
\f0 (
\f1 \'ba\'ac\'b4\'a6\'c0\'ed\'bd\'e1\'b9\'fb\'b4\'fa\'c2\'eb
\f0 )\
	action: 
\f1 \'b6\'af\'d7\'f7\'d7\'aa\'b7\'a2
\f0 ,
\f1 \'d2\'ec\'b2\'bd\'c7\'eb\'c7\'f3\'a3\'ac
\f0  store.dispatch
\f1 \'b7\'a2\'cb\'cd
\f0 action 
\f1 \'b8\'f8
\f0  reducer\
	reducer: 
\f1 \'d2\'b5\'ce\'f1\'b4\'a6\'c0\'ed\'c2\'df\'bc\'ad
\f0 ,
\f1 \'b7\'b5\'bb\'d8
\f0 (return)
\f1 \'d0\'c2
\f0 state\
	state:	
\f1 \'d7\'b4\'cc\'ac\'ca\'d5\'bc\'af\'a3\'ac\'b8\'fc\'d0\'c2\'c4\'da\'b2\'bf
\f0 state
\f1 \'d7\'b4\'cc\'ac\'a3\'ac\'b8\'fc\'d0\'c2\'b6\'a9\'d4\'c4
\f0 (store.subscribe)state
\f1 \'b5\'c4\'d7\'e9\'bc\'fe\'a3\'a8
\f0 component
\f1 \'a3\'a9
\f0 \
\
	
\f1 \'cd\'a8\'b9\'fd
\f0 store.dispatch
\f1 \'b7\'a2\'cb\'cd
\f0 action 
\f1 \'b8\'f8
\f0  reducer\
	
\f1 \'d4\'da\'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf
\f0  
\f1 \'cd\'a8\'b9\'fd
\f0  store.getState() 
\f1 \'d7\'a5
\f0 state
\f1 \'d7\'b4\'cc\'ac
\f0   
\f1 \'cc\'d8\'b5\'e3
\f0  
\f1 \'d6\'bb\'d7\'a5\'d2\'bb\'b4\'ce
\f0 \
			   store.subscribe() 
\f1 \'b6\'a9\'d4\'c4
\f0   
\f1 \'ca\'fd\'be\'dd\'b8\'fc\'d0\'c2\'a3\'ac\'bb\'e1\'b4\'a5\'b7\'a2
\f0 \
			   getState
\f1 \'b7\'c5\'d4\'da
\f0 subscribe
\f1 \'c4\'da\'b2\'bf
\f0 \

\f1 \'b2\'d9\'d7\'f7\'c1\'f7\'b3\'cc\'a3\'ba
\f0 \
	1. \{createStore\} from 'redux'\
	2. 
\f1 \'c9\'fa\'b3\'c9\'c4\'ac\'c8\'cf
\f0 state defaultState=\{\}\
	3.	
\f1 \'b4\'b4\'bd\'a8
\f0 reducer \
		const reducer = (state=defaultState,action)=>\{\
			let \{type,payload\}=action\
			swtich type\
				case XXXXX\
				
\f1 \'b8\'fc\'d0\'c2
\f0 copy
\f1 \'ba\'f3\'b5\'c4
\f0 state  Object.assign(
\f1 \'bf\'d5
\f0 ,
\f1 \'c0\'cf
\f0 ,
\f1 \'d0\'c2
\f0 )\
			default:\
				return state\
		\}\
	4. 
\f1 \'b4\'b4\'bd\'a8
\f0 store
\f1 \'b6\'d4\'cf\'f3
\f0 \
		store = createStore(reducer,defaultState)\
\
	5. store
\f1 \'b4\'ab\'b5\'dd\'b8\'f8\'d7\'e9\'bc\'fe
\f0 \
		<
\f1 \'d7\'e9\'bc\'fe\'c3\'fb
\f0  store=\{store\}/>\
\
	6. 
\f1 \'b8\'fc\'d0\'c2\'a3\'ac\'d7\'b4\'cc\'ac\'bb\'f1\'c8\'a1
\f0 \
		
\f1 \'d7\'e9\'bc\'fe\'c4\'da\'b2\'bf
\f0 :	this.props.store== store\
			this.props.store.dispatch(\{type:xxx,payload:ooo\}) 
\f1 \'b7\'a2\'cb\'cd
\f0 action
\f1 \'b8\'f8
\f0 reducer\
			this.props.store.subscribe(
\f1 \'bb\'d8\'b5\'f7
\f0 )  
\f1 \'b6\'a9\'d4\'c4
\f0  state  
\f1 \'b8\'fc\'d0\'c2
\f0 state
\f1 \'ca\'b1\'b4\'a5\'b7\'a2
\f0 \
			this.props.store.getState() 
\f1 \'bb\'f1\'c8\'a1\'d7\'b4\'cc\'ac\'a3\'ac\'d6\'b4\'d0\'d0\'d2\'bb\'b4\'ce
\f0 \
\
\
react-redux\
	
\f1 \'bb\'f9\'d3\'da
\f0 redux
\f1 \'cb\'bc\'cf\'eb
\f0 ,
\f1 \'d7\'a8\'c3\'c5\'ce\'aa
\f0 react
\f1 \'b6\'f8\'c9\'fa
\f0 \
\

\f1 \'cb\'bc\'cf\'eb
\f0 :  
\f1 \'c8\'dd\'c6\'f7\'d7\'e9\'bc\'fe
\f0 , UI
\f1 \'d7\'e9\'bc\'fe
\f0 \
	App: 
\f1 \'c4\'c3\'b5\'bd
\f0 store,
\f1 \'d0\'de\'b8\'c4\'a1\'a2\'bb\'f1\'c8\'a1
\f0 store\
	store:
\f1 \'cd\'e2\'c3\'e6
\f0 \
index.js:\
	import \{Provider,connect\} from react-redux\
\
	<Provider store=\{store\}>\
		<
\f1 \'c8\'dd\'c6\'f7\'d7\'e9\'bc\'fe
\f0 />\
	</Provider>\
\

\f1 \'c7\'b0\'b6\'cb
\f0 :fetch  
\f1 \'c7\'eb\'c7\'f3\'cd\'b7\'c0\'ef\'c3\'e6\'b4\'f8\'c6\'be\'d6\'a4\'a3\'ac\'b4\'f8
\f0 cookie				\
	fetch('http:localhost:3000/cookies', \{\
		credentials: 'include', //
\f1 \'c6\'be\'d6\'a4
\f0 \
		method:'get',\
		headers:\{\
			'Accept':'application/json,text/plain,*/*',\
			'Content-type':'application/x-www-form-urlencoded;charset=utf-8'\
		\},\
		body:
\f1 \'ca\'fd\'be\'dd
\f0 \
	\}).then(function(res) \{\
	    // ...\
	\})\
}